Addon · Dégradés

Dégradés en syntaxe Emmet.

grad-linear from-brand to-accent d-r. Voilà toute l'API.

Linéaire

Composez avec from-* et to-*. Direction avec d-r, d-br. Ou n'importe quel pas de 5° avec 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

Même syntaxe, remplacez grad-linear par grad-radial. Position avec bg-center, bg-top.

grad-radial from-brand to-transparent

grad-radial from-extra to-accent

Ajoutez animated, animated-fast, animated-slow. . Ou appliquez au texte avec -text, aux bordures avec -border.

animated

bordure en dégradé

Setters de couleur

from-brand     /* plein */
from-brand_    /* 65% */
from-brand-d   /* plus sombre */
to-transparent /* fondu */

Direction

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

Configuration container

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

Référence complète

Modificateurs de taille de fond, helpers de position, timings d'animation, table d'angles complète — tout dans la doc IA.