Générateur de Dégradés CSS

Créez visuellement des dégradés CSS linéaires, radiaux et coniques. Ajoutez plusieurs points de couleur, ajustez les positions et copiez le code CSS directement.

Studio · environnement neutre

Étapes de couleur — glissez les poignées, cliquez sur la piste pour ajouter

Type

Angle 90°

Étapes

CSS

Fonctionnalités

Linéaire, radial et conique

Plusieurs arrêts de couleur

Réglage de l'angle et de la direction

Aperçu en direct et code CSS

Comment Utiliser

1. Choisissez le type de dégradé et l'angle ; la surface l'affiche en taille réelle.

2. Glissez les poignées pour déplacer les étapes, cliquez sur un espace libre de la piste pour en ajouter (jusqu'à six), ou affinez avec les pastilles de couleur et les champs de pourcentage.

3. Copiez le CSS généré — vérifiez-le sur le damier pour repérer les bandes sur la transparence.

À propos de cet outil

Les dégradés CSS peignent des transitions de couleur douces sans fichier image : ils restent nets à toute taille et ne coûtent rien à télécharger. Ce générateur crée les trois types natifs : linear-gradient le long d'un angle, radial-gradient qui s'étend depuis le centre et conic-gradient qui tourne autour d'un point comme un cercle chromatique. Faites glisser les poignées sur la barre pour déplacer les arrêts de couleur, cliquez sur la barre pour ajouter un arrêt (jusqu'à six) et affinez couleurs et positions dans les champs. La scène prévisualise le résultat en taille réelle, et une surface en damier révèle les effets de bandes ou les transparences inattendues. Le résultat est du CSS standard qui fonctionne dans tous les navigateurs actuels, prêt à coller dans une déclaration background ou background-image.

Questions Fréquentes

Quelle est la différence entre dégradés linéaires, radiaux et coniques ?

Un dégradé linéaire change de couleur le long d'une ligne droite selon l'angle choisi. Un dégradé radial s'étend à partir d'un point central, en cercle ou en ellipse. Un dégradé conique fait tourner les couleurs autour d'un point central, ce qui est utile pour les diagrammes circulaires et les cercles chromatiques.

Comment fonctionnent les angles de dégradé ?

0deg pointe vers le haut, 90deg vers la droite, 180deg vers le bas et 270deg vers la gauche. Ainsi, linear-gradient(90deg, red, blue) commence en rouge à gauche et finit en bleu à droite.

Pourquoi mon dégradé présente-t-il des bandes visibles ?

Les bandes apparaissent quand deux couleurs proches s'étalent sur une grande surface, surtout sur les écrans 8 bits. Ajouter un arrêt intermédiaire, choisir des couleurs plus contrastées ou ajouter une légère texture de bruit aide.

Un dégradé peut-il inclure de la transparence ?

Oui. Utilisez des couleurs avec canal alpha, comme rgba ou un HEX à 8 chiffres. Notez qu'un fondu vers le mot-clé transparent peut produire un milieu grisâtre dans certains cas ; un fondu vers la même couleur avec un alpha nul est plus propre.

Puis-je utiliser un dégradé comme couleur de texte ou de bordure ?

Oui, avec un peu de CSS supplémentaire. Pour le texte, définissez le dégradé en arrière-plan, puis utilisez background-clip: text avec une couleur de texte transparente. Pour les bordures, border-image ou un fond sur un élément enveloppant sont les approches courantes.