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.

844 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.

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