Gradients

Utilities for creating an background gradient and controlling its stops.

Directions

To create a background gradient, first declare the desired gradient and, if applicable, the direction. All classes with directions are linear gradients. Radial gradients start from the center and work out to the edge. Conic gradients progressively work around a circle.

Class Output
.d-bgg-to-tl background-image: linear-gradient(to top left, var(--bgg-stops)) !important;
.d-bgg-to-t background-image: linear-gradient(to top, var(--bgg-stops)) !important;
.d-bgg-to-tr background-image: linear-gradient(to top right, var(--bgg-stops)) !important;
.d-bgg-to-r background-image: linear-gradient(to right, var(--bgg-stops)) !important;
.d-bgg-to-br background-image: linear-gradient(to bottom right, var(--bgg-stops)) !important;
.d-bgg-to-b background-image: linear-gradient(to bottom, var(--bgg-stops)) !important;
.d-bgg-to-bl background-image: linear-gradient(to bottom left, var(--bgg-stops)) !important;
.d-bgg-to-l background-image: linear-gradient(to left, var(--bgg-stops)) !important;
.d-bgg-radial background-image: radial-gradient(var(--bgg-stops)) !important;
.d-bgg-conic background-image: conic-gradient(var(--bgg-stops)) !important;
.d-bgg-none background-image: !important;
.d-bgg-unset background-image: !important;

Color Stops

The starting stop (d-bgg-from-{color}) should be declared. Optionally an ending stop (d-bgg-to-{color}) can also be declared.

Class Output
.d-bgg-from-purple-100
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--purple-100-h) var(--purple-100-s) var(--purple-100-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--purple-100-h) var(--purple-100-s) var(--purple-100-l) / 0%) !important;
.d-bgg-from-purple-200
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--purple-200-h) var(--purple-200-s) var(--purple-200-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--purple-200-h) var(--purple-200-s) var(--purple-200-l) / 0%) !important;
.d-bgg-from-purple-300
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--purple-300-h) var(--purple-300-s) var(--purple-300-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--purple-300-h) var(--purple-300-s) var(--purple-300-l) / 0%) !important;
.d-bgg-from-purple-400
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) / 0%) !important;
.d-bgg-from-purple-500
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--purple-500-h) var(--purple-500-s) var(--purple-500-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--purple-500-h) var(--purple-500-s) var(--purple-500-l) / 0%) !important;
.d-bgg-from-purple-600
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--purple-600-h) var(--purple-600-s) var(--purple-600-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--purple-600-h) var(--purple-600-s) var(--purple-600-l) / 0%) !important;
.d-bgg-from-purple-700
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l) / 0%) !important;
.d-bgg-from-purple-800
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l) / 0%) !important;
.d-bgg-from-black-025
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--black-025-h) var(--black-025-s) var(--black-025-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--black-025-h) var(--black-025-s) var(--black-025-l) / 0%) !important;
.d-bgg-from-black-050
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--black-050-h) var(--black-050-s) var(--black-050-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--black-050-h) var(--black-050-s) var(--black-050-l) / 0%) !important;
.d-bgg-from-black-075
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--black-075-h) var(--black-075-s) var(--black-075-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--black-075-h) var(--black-075-s) var(--black-075-l) / 0%) !important;
.d-bgg-from-black-100
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--black-100-h) var(--black-100-s) var(--black-100-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--black-100-h) var(--black-100-s) var(--black-100-l) / 0%) !important;
.d-bgg-from-black-200
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--black-200-h) var(--black-200-s) var(--black-200-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--black-200-h) var(--black-200-s) var(--black-200-l) / 0%) !important;
.d-bgg-from-black-300
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--black-300-h) var(--black-300-s) var(--black-300-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--black-300-h) var(--black-300-s) var(--black-300-l) / 0%) !important;
.d-bgg-from-black-400
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--black-400-h) var(--black-400-s) var(--black-400-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--black-400-h) var(--black-400-s) var(--black-400-l) / 0%) !important;
.d-bgg-from-black-500
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--black-500-h) var(--black-500-s) var(--black-500-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--black-500-h) var(--black-500-s) var(--black-500-l) / 0%) !important;
.d-bgg-from-black-600
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--black-600-h) var(--black-600-s) var(--black-600-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--black-600-h) var(--black-600-s) var(--black-600-l) / 0%) !important;
.d-bgg-from-black-700
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--black-700-h) var(--black-700-s) var(--black-700-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--black-700-h) var(--black-700-s) var(--black-700-l) / 0%) !important;
.d-bgg-from-black-800
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--black-800-h) var(--black-800-s) var(--black-800-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--black-800-h) var(--black-800-s) var(--black-800-l) / 0%) !important;
.d-bgg-from-black-900
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) / 0%) !important;
.d-bgg-from-orange-100
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--orange-100-h) var(--orange-100-s) var(--orange-100-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--orange-100-h) var(--orange-100-s) var(--orange-100-l) / 0%) !important;
.d-bgg-from-orange-200
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--orange-200-h) var(--orange-200-s) var(--orange-200-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--orange-200-h) var(--orange-200-s) var(--orange-200-l) / 0%) !important;
.d-bgg-from-orange-300
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--orange-300-h) var(--orange-300-s) var(--orange-300-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--orange-300-h) var(--orange-300-s) var(--orange-300-l) / 0%) !important;
.d-bgg-from-orange-400
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--orange-400-h) var(--orange-400-s) var(--orange-400-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--orange-400-h) var(--orange-400-s) var(--orange-400-l) / 0%) !important;
.d-bgg-from-orange-500
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--orange-500-h) var(--orange-500-s) var(--orange-500-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--orange-500-h) var(--orange-500-s) var(--orange-500-l) / 0%) !important;
.d-bgg-from-orange-600
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--orange-600-h) var(--orange-600-s) var(--orange-600-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--orange-600-h) var(--orange-600-s) var(--orange-600-l) / 0%) !important;
.d-bgg-from-pink-100
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--pink-100-h) var(--pink-100-s) var(--pink-100-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--pink-100-h) var(--pink-100-s) var(--pink-100-l) / 0%) !important;
.d-bgg-from-pink-200
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--pink-200-h) var(--pink-200-s) var(--pink-200-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--pink-200-h) var(--pink-200-s) var(--pink-200-l) / 0%) !important;
.d-bgg-from-pink-300
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--pink-300-h) var(--pink-300-s) var(--pink-300-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--pink-300-h) var(--pink-300-s) var(--pink-300-l) / 0%) !important;
.d-bgg-from-pink-400
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--pink-400-h) var(--pink-400-s) var(--pink-400-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--pink-400-h) var(--pink-400-s) var(--pink-400-l) / 0%) !important;
.d-bgg-from-pink-500
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--pink-500-h) var(--pink-500-s) var(--pink-500-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--pink-500-h) var(--pink-500-s) var(--pink-500-l) / 0%) !important;
.d-bgg-from-pink-600
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--pink-600-h) var(--pink-600-s) var(--pink-600-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--pink-600-h) var(--pink-600-s) var(--pink-600-l) / 0%) !important;
.d-bgg-from-pink-700
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--pink-700-h) var(--pink-700-s) var(--pink-700-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--pink-700-h) var(--pink-700-s) var(--pink-700-l) / 0%) !important;
.d-bgg-from-yellow-050
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--yellow-050-h) var(--yellow-050-s) var(--yellow-050-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--yellow-050-h) var(--yellow-050-s) var(--yellow-050-l) / 0%) !important;
.d-bgg-from-yellow-100
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--yellow-100-h) var(--yellow-100-s) var(--yellow-100-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--yellow-100-h) var(--yellow-100-s) var(--yellow-100-l) / 0%) !important;
.d-bgg-from-yellow-200
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--yellow-200-h) var(--yellow-200-s) var(--yellow-200-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--yellow-200-h) var(--yellow-200-s) var(--yellow-200-l) / 0%) !important;
.d-bgg-from-yellow-300
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--yellow-300-h) var(--yellow-300-s) var(--yellow-300-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--yellow-300-h) var(--yellow-300-s) var(--yellow-300-l) / 0%) !important;
.d-bgg-from-yellow-400
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--yellow-400-h) var(--yellow-400-s) var(--yellow-400-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--yellow-400-h) var(--yellow-400-s) var(--yellow-400-l) / 0%) !important;
.d-bgg-from-yellow-500
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--yellow-500-h) var(--yellow-500-s) var(--yellow-500-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--yellow-500-h) var(--yellow-500-s) var(--yellow-500-l) / 0%) !important;
.d-bgg-from-yellow-600
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--yellow-600-h) var(--yellow-600-s) var(--yellow-600-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--yellow-600-h) var(--yellow-600-s) var(--yellow-600-l) / 0%) !important;
.d-bgg-from-red-100
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--red-100-h) var(--red-100-s) var(--red-100-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--red-100-h) var(--red-100-s) var(--red-100-l) / 0%) !important;
.d-bgg-from-red-200
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--red-200-h) var(--red-200-s) var(--red-200-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--red-200-h) var(--red-200-s) var(--red-200-l) / 0%) !important;
.d-bgg-from-red-300
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--red-300-h) var(--red-300-s) var(--red-300-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--red-300-h) var(--red-300-s) var(--red-300-l) / 0%) !important;
.d-bgg-from-red-400
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--red-400-h) var(--red-400-s) var(--red-400-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--red-400-h) var(--red-400-s) var(--red-400-l) / 0%) !important;
.d-bgg-from-red-500
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--red-500-h) var(--red-500-s) var(--red-500-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--red-500-h) var(--red-500-s) var(--red-500-l) / 0%) !important;
.d-bgg-from-red-600
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--red-600-h) var(--red-600-s) var(--red-600-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--red-600-h) var(--red-600-s) var(--red-600-l) / 0%) !important;
.d-bgg-from-red-700
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--red-700-h) var(--red-700-s) var(--red-700-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--red-700-h) var(--red-700-s) var(--red-700-l) / 0%) !important;
.d-bgg-from-green-100
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--green-100-h) var(--green-100-s) var(--green-100-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--green-100-h) var(--green-100-s) var(--green-100-l) / 0%) !important;
.d-bgg-from-green-200
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--green-200-h) var(--green-200-s) var(--green-200-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--green-200-h) var(--green-200-s) var(--green-200-l) / 0%) !important;
.d-bgg-from-green-300
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--green-300-h) var(--green-300-s) var(--green-300-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--green-300-h) var(--green-300-s) var(--green-300-l) / 0%) !important;
.d-bgg-from-green-400
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--green-400-h) var(--green-400-s) var(--green-400-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--green-400-h) var(--green-400-s) var(--green-400-l) / 0%) !important;
.d-bgg-from-green-500
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--green-500-h) var(--green-500-s) var(--green-500-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--green-500-h) var(--green-500-s) var(--green-500-l) / 0%) !important;
.d-bgg-from-green-600
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--green-600-h) var(--green-600-s) var(--green-600-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--green-600-h) var(--green-600-s) var(--green-600-l) / 0%) !important;
.d-bgg-from-green-700
--bgg-from-opacity: 100%;
--bgg-from: hsla(var(--green-700-h) var(--green-700-s) var(--green-700-l) / var(----bgg-from-opacity)) !important;
--bgg-to: hsla(var(--green-700-h) var(--green-700-s) var(--green-700-l) / 0%) !important;
.d-bgg-to-purple-100
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--purple-100-h) var(--purple-100-s) var(--purple-100-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-purple-200
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--purple-200-h) var(--purple-200-s) var(--purple-200-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-purple-300
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--purple-300-h) var(--purple-300-s) var(--purple-300-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-purple-400
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-purple-500
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--purple-500-h) var(--purple-500-s) var(--purple-500-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-purple-600
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--purple-600-h) var(--purple-600-s) var(--purple-600-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-purple-700
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-purple-800
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-black-025
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--black-025-h) var(--black-025-s) var(--black-025-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-black-050
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--black-050-h) var(--black-050-s) var(--black-050-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-black-075
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--black-075-h) var(--black-075-s) var(--black-075-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-black-100
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--black-100-h) var(--black-100-s) var(--black-100-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-black-200
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--black-200-h) var(--black-200-s) var(--black-200-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-black-300
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--black-300-h) var(--black-300-s) var(--black-300-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-black-400
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--black-400-h) var(--black-400-s) var(--black-400-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-black-500
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--black-500-h) var(--black-500-s) var(--black-500-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-black-600
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--black-600-h) var(--black-600-s) var(--black-600-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-black-700
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--black-700-h) var(--black-700-s) var(--black-700-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-black-800
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--black-800-h) var(--black-800-s) var(--black-800-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-black-900
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-orange-100
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--orange-100-h) var(--orange-100-s) var(--orange-100-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-orange-200
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--orange-200-h) var(--orange-200-s) var(--orange-200-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-orange-300
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--orange-300-h) var(--orange-300-s) var(--orange-300-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-orange-400
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--orange-400-h) var(--orange-400-s) var(--orange-400-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-orange-500
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--orange-500-h) var(--orange-500-s) var(--orange-500-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-orange-600
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--orange-600-h) var(--orange-600-s) var(--orange-600-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-pink-100
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--pink-100-h) var(--pink-100-s) var(--pink-100-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-pink-200
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--pink-200-h) var(--pink-200-s) var(--pink-200-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-pink-300
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--pink-300-h) var(--pink-300-s) var(--pink-300-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-pink-400
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--pink-400-h) var(--pink-400-s) var(--pink-400-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-pink-500
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--pink-500-h) var(--pink-500-s) var(--pink-500-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-pink-600
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--pink-600-h) var(--pink-600-s) var(--pink-600-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-pink-700
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--pink-700-h) var(--pink-700-s) var(--pink-700-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-yellow-050
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--yellow-050-h) var(--yellow-050-s) var(--yellow-050-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-yellow-100
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--yellow-100-h) var(--yellow-100-s) var(--yellow-100-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-yellow-200
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--yellow-200-h) var(--yellow-200-s) var(--yellow-200-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-yellow-300
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--yellow-300-h) var(--yellow-300-s) var(--yellow-300-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-yellow-400
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--yellow-400-h) var(--yellow-400-s) var(--yellow-400-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-yellow-500
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--yellow-500-h) var(--yellow-500-s) var(--yellow-500-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-yellow-600
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--yellow-600-h) var(--yellow-600-s) var(--yellow-600-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-red-100
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--red-100-h) var(--red-100-s) var(--red-100-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-red-200
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--red-200-h) var(--red-200-s) var(--red-200-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-red-300
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--red-300-h) var(--red-300-s) var(--red-300-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-red-400
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--red-400-h) var(--red-400-s) var(--red-400-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-red-500
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--red-500-h) var(--red-500-s) var(--red-500-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-red-600
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--red-600-h) var(--red-600-s) var(--red-600-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-red-700
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--red-700-h) var(--red-700-s) var(--red-700-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-green-100
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--green-100-h) var(--green-100-s) var(--green-100-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-green-200
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--green-200-h) var(--green-200-s) var(--green-200-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-green-300
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--green-300-h) var(--green-300-s) var(--green-300-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-green-400
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--green-400-h) var(--green-400-s) var(--green-400-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-green-500
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--green-500-h) var(--green-500-s) var(--green-500-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-green-600
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--green-600-h) var(--green-600-s) var(--green-600-l) / var(--bgg-to-opacity)) !important;
.d-bgg-to-green-700
--bgg-to-opacity: 100%;
--bgg-to: hsla(var(--green-700-h) var(--green-700-s) var(--green-700-l) / var(--bgg-to-opacity)) !important;

Starting color

Use d-bgg-from-{color} to declare the gradient starting color stop.

Ending color

Use d-bgg-to-{color} to declare the gradient ending color stop.

Changing opacities

Use d-bgg-from-o{n} or d-bgg-to-o{n} to change the opacity values of each gradient color stop.

Hover

Use h:d-bgg-{from|to}-{color} to change an element's background gradient color spot when in an :hover state.

Focus

Use f:d-bgg-{from|to}-{color} to change an element's background gradient starting and ending stops in :focus and :focus-within states.