Toolzi LogoToolzi

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

Générez du code CSS de dégradés instantanément avec un éditeur visuel.

0%
100%

Aperçu

Code CSS

background: linear-gradient(to bottom right, #6366f1 0%, #ec4899 100%);

Qu'est-ce qu'un dégradé CSS ?

Les dégradés CSS sont des transitions de couleur rendues directement par le navigateur sans images. Ils sont utilisés pour les fonds, bordures et effets d'interface.

Types de Dégradés CSS

Dégradé Linéaire

Les couleurs se fondent le long d'une ligne droite dans un angle ou une direction spécifiée. Défini avec linear-gradient().

Dégradé Radial

Les couleurs rayonnent vers l'extérieur depuis un point central de façon circulaire ou elliptique. Défini avec radial-gradient().

Dégradé Conique

Les couleurs pivotent autour d'un point central, comme un graphique circulaire. Défini avec conic-gradient().

Comment Utiliser le Générateur

Sélectionnez un type de dégradé, ajustez la direction ou l'angle, ajoutez ou supprimez des points de couleur, puis copiez le code CSS généré.

Conseils pour les Dégradés CSS

Utilisez rgba() ou hex avec alpha pour des dégradés transparents. Superposez plusieurs dégradés avec des arrière-plans séparés par des virgules.

Questions Fréquentes

Qu'est-ce qu'un dégradé CSS ?
Les dégradés CSS sont des transitions de couleur créées avec des fonctions comme linear-gradient(), radial-gradient() ou conic-gradient() sans fichiers image.
Quelle est la différence entre les dégradés linéaires et radiaux ?
Les dégradés linéaires se fondent le long d'une ligne droite ; les radiaux s'étendent depuis un point central de façon circulaire ou elliptique.
Comment ajouter de la transparence à un dégradé CSS ?
Utilisez des valeurs rgba() (ex. rgba(255,0,0,0.5)) ou des codes hex à 8 chiffres (ex. #ff000080) dans vos points de couleur.
conic-gradient est-il pris en charge par tous les navigateurs ?
Oui, dans tous les navigateurs modernes : Chrome 69+, Firefox 83+, Safari 12.1+.
Puis-je superposer plusieurs dégradés sur un élément ?
Oui. CSS prend en charge plusieurs arrière-plans séparés par des virgules, permettant de superposer des dégradés.
Comment créer du texte en dégradé ?
Appliquez le dégradé en arrière-plan, puis utilisez -webkit-background-clip: text et color: transparent.
Qu'est-ce qu'un point de couleur dans un dégradé CSS ?
Un point de couleur définit une couleur spécifique à un pourcentage précis le long du dégradé.

Outils Associés

CSS Gradient Text Generator →