6XC

Générateur de dégradé CSS

Concevez des dégradés CSS linéaires, radiaux et coniques avec aperçu en direct et copiez le code.

1 194 vues

Les dégradés CSS

Un dégradé est une transition douce entre des couleurs, écrit sous la forme linear-gradient(angle, couleur1, couleur2), radial-gradient(...) ou conic-gradient(...). Choisissez le type, l'angle et jusqu'à trois couleurs — l'aperçu et le CSS prêt à copier se mettent à jour instantanément. Les dégradés sont rendus par le navigateur, donc ils ne coûtent aucun téléchargement d'image et restent parfaitement nets à toute taille.

Questions fréquentes

Que signifie l'angle dans un dégradé linéaire ?

0° pointe vers le haut, 90° vers la droite, 180° vers le bas — l'angle est la direction vers laquelle le dégradé se dirige. 135° donne la diagonale populaire du haut-gauche vers le bas-droit.

Quand utiliser radial ou conic ?

Radial se mélange du centre vers l'extérieur — idéal pour les projecteurs et les vignettes. Conic tourne autour du centre comme une roue chromatique — idéal pour les graphiques circulaires et les anneaux arc-en-ciel.

Commentaires

Pas encore de commentaires — soyez le premier à en écrire un !

Outils similaires

Générateur d'ombre CSS (box-shadow) Concevez une box-shadow visuellement — décalages, flou, étalement, couleur, opacité et inset — avec aperçu en direct. Lancer Générateur de border-radius CSS Arrondissez chaque coin individuellement ou tous à la fois, en px ou %, avec aperçu en direct et CSS copiable. Lancer Générateur d'ombre de texte CSS Concevez un text-shadow avec décalages, flou, couleur et opacité — aperçu en direct sur un texte d'exemple. Lancer Générateur CSS de glassmorphism Concevez un effet de verre (glassmorphism) avec aperçu en direct — ajustez le flou, la transparence, la teinte et la bordure, puis copiez le CSS. Lancer