Gradients
Utilities for creating an background gradient and controlling its stops.
Starting Color #
Use d-bgg-from-{color} to declare the gradient starting color stop.
<div class="d-bgg-to-br d-bgg-from-purple-400">...</div>
Ending Color #
Use d-bgg-to-{color} to declare the gradient ending color stop.
<div class="d-bgg-to-br d-bgg-from-purple-400 d-bgg-to-magenta-300">...</div>
Hover #
Use h:d-bgg-{from|to}-{color} to change an element's background gradient color spot when in an :hover state.
<dt-button kind="unstyled" class="d-p16 d-bar4 d-fs-200 d-bgg-to-r d-bgg-from-purple-300 h:d-bgg-from-purple-300 d-bgg-to-magenta-100 h:d-bgg-to-magenta-300 d-baw0">Hover over me</dt-button>
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.
<dt-button kind="unstyled" class="d-p16 d-bar4 d-fs-200 d-bgg-to-r d-bgg-from-purple-300 h:d-bgg-from-purple-300 d-bgg-to-magenta-100 f:d-bgg-to-magenta-300 d-baw0">Focus me</dt-button>
Focus Visible #
Use fv:d-bgg-{from|to}-{color} to change an element's background gradient starting and ending stops in :focus-visible state [only when focused by keyboard].
<dt-button kind="unstyled" class="d-p16 d-bar4 d-fs-200 d-bgg-to-r d-bgg-from-purple-300 h:d-bgg-from-purple-300 d-bgg-to-magenta-100 fv:d-bgg-to-magenta-300 d-baw0">Keyboard focus me</dt-button>
Changing Opacities #
Use d-bgg-(from|to)-o{n} to change the opacity values of each gradient color stop. You can also change the opacity values of each gradient color stop on :hover, :focus, :focus-visible by using the respective h:d-bgg-(from|to)-o{n}, f:d-bgg-(from|to)-o{n}, fv:d-bgg-(from|to)-o{n} prefixes.
<div class="d-bgg-from-purple-300 d-bgg-to-magenta-100 d-bgg-to-o0">...</div>
<div class="d-bgg-from-purple-300 d-bgg-from-o99 d-bgg-to-magenta-100 d-bgg-to-o10">...</div>
<div class="d-bgg-from-purple-300 d-bgg-from-o95 d-bgg-to-magenta-100 d-bgg-to-o25">...</div>
<div class="d-bgg-from-purple-300 d-bgg-from-o90 d-bgg-to-magenta-100 d-bgg-to-o50">...</div>
<div class="d-bgg-from-purple-300 d-bgg-from-o75 d-bgg-to-magenta-100 d-bgg-to-o75">...</div>
<div class="d-bgg-from-purple-300 d-bgg-from-o50 d-bgg-to-magenta-100 d-bgg-to-o90">...</div>
<div class="d-bgg-from-purple-300 d-bgg-from-o25 d-bgg-to-magenta-100 d-bgg-to-o95">...</div>
<div class="d-bgg-from-purple-300 d-bgg-from-o10 d-bgg-to-magenta-100 d-bgg-to-o99">...</div>
<div class="d-bgg-from-purple-300 d-bgg-from-o0 d-bgg-to-magenta-100">...</div>
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: none !important; |
| .d-bgg-unset | background-image: unset !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-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-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-magenta-100 |
--bgg-from-opacity: 100%; --bgg-from: hsla(var(--magenta-100-h) var(--magenta-100-s) var(--magenta-100-l) / var(--bgg-from-opacity)) !important; --bgg-to: hsla(var(--magenta-100-h) var(--magenta-100-s) var(--magenta-100-l) / 0%) !important; |
| .d-bgg-from-magenta-200 |
--bgg-from-opacity: 100%; --bgg-from: hsla(var(--magenta-200-h) var(--magenta-200-s) var(--magenta-200-l) / var(--bgg-from-opacity)) !important; --bgg-to: hsla(var(--magenta-200-h) var(--magenta-200-s) var(--magenta-200-l) / 0%) !important; |
| .d-bgg-from-magenta-300 |
--bgg-from-opacity: 100%; --bgg-from: hsla(var(--magenta-300-h) var(--magenta-300-s) var(--magenta-300-l) / var(--bgg-from-opacity)) !important; --bgg-to: hsla(var(--magenta-300-h) var(--magenta-300-s) var(--magenta-300-l) / 0%) !important; |
| .d-bgg-from-magenta-400 |
--bgg-from-opacity: 100%; --bgg-from: hsla(var(--magenta-400-h) var(--magenta-400-s) var(--magenta-400-l) / var(--bgg-from-opacity)) !important; --bgg-to: hsla(var(--magenta-400-h) var(--magenta-400-s) var(--magenta-400-l) / 0%) !important; |
| .d-bgg-from-magenta-500 |
--bgg-from-opacity: 100%; --bgg-from: hsla(var(--magenta-500-h) var(--magenta-500-s) var(--magenta-500-l) / var(--bgg-from-opacity)) !important; --bgg-to: hsla(var(--magenta-500-h) var(--magenta-500-s) var(--magenta-500-l) / 0%) !important; |
| .d-bgg-from-gold-100 |
--bgg-from-opacity: 100%; --bgg-from: hsla(var(--gold-100-h) var(--gold-100-s) var(--gold-100-l) / var(--bgg-from-opacity)) !important; --bgg-to: hsla(var(--gold-100-h) var(--gold-100-s) var(--gold-100-l) / 0%) !important; |
| .d-bgg-from-gold-200 |
--bgg-from-opacity: 100%; --bgg-from: hsla(var(--gold-200-h) var(--gold-200-s) var(--gold-200-l) / var(--bgg-from-opacity)) !important; --bgg-to: hsla(var(--gold-200-h) var(--gold-200-s) var(--gold-200-l) / 0%) !important; |
| .d-bgg-from-gold-300 |
--bgg-from-opacity: 100%; --bgg-from: hsla(var(--gold-300-h) var(--gold-300-s) var(--gold-300-l) / var(--bgg-from-opacity)) !important; --bgg-to: hsla(var(--gold-300-h) var(--gold-300-s) var(--gold-300-l) / 0%) !important; |
| .d-bgg-from-gold-400 |
--bgg-from-opacity: 100%; --bgg-from: hsla(var(--gold-400-h) var(--gold-400-s) var(--gold-400-l) / var(--bgg-from-opacity)) !important; --bgg-to: hsla(var(--gold-400-h) var(--gold-400-s) var(--gold-400-l) / 0%) !important; |
| .d-bgg-from-gold-500 |
--bgg-from-opacity: 100%; --bgg-from: hsla(var(--gold-500-h) var(--gold-500-s) var(--gold-500-l) / var(--bgg-from-opacity)) !important; --bgg-to: hsla(var(--gold-500-h) var(--gold-500-s) var(--gold-500-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-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-blue-100 |
--bgg-from-opacity: 100%; --bgg-from: hsla(var(--blue-100-h) var(--blue-100-s) var(--blue-100-l) / var(--bgg-from-opacity)) !important; --bgg-to: hsla(var(--blue-100-h) var(--blue-100-s) var(--blue-100-l) / 0%) !important; |
| .d-bgg-from-blue-200 |
--bgg-from-opacity: 100%; --bgg-from: hsla(var(--blue-200-h) var(--blue-200-s) var(--blue-200-l) / var(--bgg-from-opacity)) !important; --bgg-to: hsla(var(--blue-200-h) var(--blue-200-s) var(--blue-200-l) / 0%) !important; |
| .d-bgg-from-blue-300 |
--bgg-from-opacity: 100%; --bgg-from: hsla(var(--blue-300-h) var(--blue-300-s) var(--blue-300-l) / var(--bgg-from-opacity)) !important; --bgg-to: hsla(var(--blue-300-h) var(--blue-300-s) var(--blue-300-l) / 0%) !important; |
| .d-bgg-from-blue-400 |
--bgg-from-opacity: 100%; --bgg-from: hsla(var(--blue-400-h) var(--blue-400-s) var(--blue-400-l) / var(--bgg-from-opacity)) !important; --bgg-to: hsla(var(--blue-400-h) var(--blue-400-s) var(--blue-400-l) / 0%) !important; |
| .d-bgg-from-blue-500 |
--bgg-from-opacity: 100%; --bgg-from: hsla(var(--blue-500-h) var(--blue-500-s) var(--blue-500-l) / var(--bgg-from-opacity)) !important; --bgg-to: hsla(var(--blue-500-h) var(--blue-500-s) var(--blue-500-l) / 0%) !important; |
| .d-bgg-from-tan-100 |
--bgg-from-opacity: 100%; --bgg-from: hsla(var(--tan-100-h) var(--tan-100-s) var(--tan-100-l) / var(--bgg-from-opacity)) !important; --bgg-to: hsla(var(--tan-100-h) var(--tan-100-s) var(--tan-100-l) / 0%) !important; |
| .d-bgg-from-tan-200 |
--bgg-from-opacity: 100%; --bgg-from: hsla(var(--tan-200-h) var(--tan-200-s) var(--tan-200-l) / var(--bgg-from-opacity)) !important; --bgg-to: hsla(var(--tan-200-h) var(--tan-200-s) var(--tan-200-l) / 0%) !important; |
| .d-bgg-from-tan-300 |
--bgg-from-opacity: 100%; --bgg-from: hsla(var(--tan-300-h) var(--tan-300-s) var(--tan-300-l) / var(--bgg-from-opacity)) !important; --bgg-to: hsla(var(--tan-300-h) var(--tan-300-s) var(--tan-300-l) / 0%) !important; |
| .d-bgg-from-tan-400 |
--bgg-from-opacity: 100%; --bgg-from: hsla(var(--tan-400-h) var(--tan-400-s) var(--tan-400-l) / var(--bgg-from-opacity)) !important; --bgg-to: hsla(var(--tan-400-h) var(--tan-400-s) var(--tan-400-l) / 0%) !important; |
| .d-bgg-from-tan-500 |
--bgg-from-opacity: 100%; --bgg-from: hsla(var(--tan-500-h) var(--tan-500-s) var(--tan-500-l) / var(--bgg-from-opacity)) !important; --bgg-to: hsla(var(--tan-500-h) var(--tan-500-s) var(--tan-500-l) / 0%) !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-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-magenta-100 |
--bgg-to-opacity: 100%; --bgg-to: hsla(var(--magenta-100-h) var(--magenta-100-s) var(--magenta-100-l) / var(--bgg-to-opacity)) !important; |
| .d-bgg-to-magenta-200 |
--bgg-to-opacity: 100%; --bgg-to: hsla(var(--magenta-200-h) var(--magenta-200-s) var(--magenta-200-l) / var(--bgg-to-opacity)) !important; |
| .d-bgg-to-magenta-300 |
--bgg-to-opacity: 100%; --bgg-to: hsla(var(--magenta-300-h) var(--magenta-300-s) var(--magenta-300-l) / var(--bgg-to-opacity)) !important; |
| .d-bgg-to-magenta-400 |
--bgg-to-opacity: 100%; --bgg-to: hsla(var(--magenta-400-h) var(--magenta-400-s) var(--magenta-400-l) / var(--bgg-to-opacity)) !important; |
| .d-bgg-to-magenta-500 |
--bgg-to-opacity: 100%; --bgg-to: hsla(var(--magenta-500-h) var(--magenta-500-s) var(--magenta-500-l) / var(--bgg-to-opacity)) !important; |
| .d-bgg-to-gold-100 |
--bgg-to-opacity: 100%; --bgg-to: hsla(var(--gold-100-h) var(--gold-100-s) var(--gold-100-l) / var(--bgg-to-opacity)) !important; |
| .d-bgg-to-gold-200 |
--bgg-to-opacity: 100%; --bgg-to: hsla(var(--gold-200-h) var(--gold-200-s) var(--gold-200-l) / var(--bgg-to-opacity)) !important; |
| .d-bgg-to-gold-300 |
--bgg-to-opacity: 100%; --bgg-to: hsla(var(--gold-300-h) var(--gold-300-s) var(--gold-300-l) / var(--bgg-to-opacity)) !important; |
| .d-bgg-to-gold-400 |
--bgg-to-opacity: 100%; --bgg-to: hsla(var(--gold-400-h) var(--gold-400-s) var(--gold-400-l) / var(--bgg-to-opacity)) !important; |
| .d-bgg-to-gold-500 |
--bgg-to-opacity: 100%; --bgg-to: hsla(var(--gold-500-h) var(--gold-500-s) var(--gold-500-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-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-blue-100 |
--bgg-to-opacity: 100%; --bgg-to: hsla(var(--blue-100-h) var(--blue-100-s) var(--blue-100-l) / var(--bgg-to-opacity)) !important; |
| .d-bgg-to-blue-200 |
--bgg-to-opacity: 100%; --bgg-to: hsla(var(--blue-200-h) var(--blue-200-s) var(--blue-200-l) / var(--bgg-to-opacity)) !important; |
| .d-bgg-to-blue-300 |
--bgg-to-opacity: 100%; --bgg-to: hsla(var(--blue-300-h) var(--blue-300-s) var(--blue-300-l) / var(--bgg-to-opacity)) !important; |
| .d-bgg-to-blue-400 |
--bgg-to-opacity: 100%; --bgg-to: hsla(var(--blue-400-h) var(--blue-400-s) var(--blue-400-l) / var(--bgg-to-opacity)) !important; |
| .d-bgg-to-blue-500 |
--bgg-to-opacity: 100%; --bgg-to: hsla(var(--blue-500-h) var(--blue-500-s) var(--blue-500-l) / var(--bgg-to-opacity)) !important; |
| .d-bgg-to-tan-100 |
--bgg-to-opacity: 100%; --bgg-to: hsla(var(--tan-100-h) var(--tan-100-s) var(--tan-100-l) / var(--bgg-to-opacity)) !important; |
| .d-bgg-to-tan-200 |
--bgg-to-opacity: 100%; --bgg-to: hsla(var(--tan-200-h) var(--tan-200-s) var(--tan-200-l) / var(--bgg-to-opacity)) !important; |
| .d-bgg-to-tan-300 |
--bgg-to-opacity: 100%; --bgg-to: hsla(var(--tan-300-h) var(--tan-300-s) var(--tan-300-l) / var(--bgg-to-opacity)) !important; |
| .d-bgg-to-tan-400 |
--bgg-to-opacity: 100%; --bgg-to: hsla(var(--tan-400-h) var(--tan-400-s) var(--tan-400-l) / var(--bgg-to-opacity)) !important; |
| .d-bgg-to-tan-500 |
--bgg-to-opacity: 100%; --bgg-to: hsla(var(--tan-500-h) var(--tan-500-s) var(--tan-500-l) / var(--bgg-to-opacity)) !important; |