Background Helpers

Collection of helpers for element background

--grad

The --grad helper adds a linear gradient on the background of an element. By itself --grad sets the gradient from black to transparent. The value can define either the direction (eg. to top, to right, etc) or the angle (eg. 180deg). The gradient color can be changed from the default of black with the addition of the --grad-color helper. This helper sets the background-image CSS property.

<div style="--grad:180deg; --grad-color: hsl(273, 99%, 31%);"> ... </div>