Couleurs du dégradé
Préréglages
floobits.com
floobits.com
🌐 Web et technique
Composez un dégradé linéaire, radial ou conique, ajustez les couleurs et leurs positions, puis copiez le code CSS.
Par Jimenez Julien, éditeur de Floobits.com · mis à jour le
Les dégradés CSS sont des images générées par le navigateur, sans fichier à charger. Le dégradé linéaire passe d'une couleur à l'autre le long d'un axe défini par un angle, le dégradé radial rayonne depuis un point en forme de cercle ou d'ellipse, et le dégradé conique tourne autour d'un centre comme un camembert ou une roue chromatique. Ils s'utilisent dans la propriété background ou background-image.
Chaque couleur peut recevoir une position en pourcentage et une opacité. Le générateur trie les arrêts par position, propose un dégradé répété (repeating-linear-gradient et ses variantes), une couleur de repli pour les très anciens navigateurs et le choix d'un espace d'interpolation. Avec OKLCH ou OKLab, le milieu d'un dégradé entre deux couleurs vives reste éclatant au lieu de virer au gris, mais il faut un navigateur récent.
Placez deux couleurs à la même position : par exemple rouge à 50 % puis bleu à 50 %. La transition devient alors une coupure franche, utile pour des rayures ou des fonds en deux tons.
À 0 degré, le dégradé va du bas vers le haut. L'angle tourne dans le sens horaire : 90 degrés va de la gauche vers la droite, 180 degrés du haut vers le bas.
Oui, réglez l'opacité d'une couleur en dessous de 100 %. Le code produit alors une valeur rgba, ce qui permet par exemple de fondre une image vers la transparence.