Addon · Gradients

Gradients in Emmet syntax.

grad-linear from-brand to-accent d-r. That's the whole API.

Linear

Compose with from-* and to-*. Direction with d-r, d-br. Or any 5° step with a-90, a-135.

grad-linear from-brand to-accent d-r

grad-linear from-accent to-extra d-br

grad-linear from-extra to-brand a-90

from-brand_ to-accent_ d-tr

Same syntax, swap grad-linear for grad-radial. Position with bg-center, bg-top.

grad-radial from-brand to-transparent

grad-radial from-extra to-accent

Add animated, animated-fast, animated-slow. . Or apply to text with -text, to borders with -border.

animated

gradient border

Color setters

from-brand     /* full */
from-brand_    /* 65% */
from-brand-d   /* darker */
to-transparent /* fade */

Direction

d-t  d-b  d-l  d-r
d-tl d-tr d-bl d-br
a-0 ... a-360 (5° step)

Container setup

<body class="all-grads">
  <!-- enables variables -->
</body>

Full reference

Background size modifiers, position helpers, animation timings, the full angle table — all in the AI doc.