Générateur de Dégradé CSS

Comment utiliser le générateur de dégradé CSS

1. Choisissez le type Linéaire ou Radial.
2. Pour un dégradé linéaire, faites glisser le curseur Direction pour régler l'angle.
3. Choisissez les couleurs pour chaque point. Cliquez sur + Ajouter un point pour en ajouter. La prévisualisation et le CSS se mettent à jour instantanément.
4. Cliquez sur Copier pour copier la propriété CSS background prête à l'emploi.

Syntaxe des dégradés CSS

Dégradés linéaires: transition de couleurs le long d'une ligne droite :

background: linear-gradient(90deg, #FF5733, #3498DB);

L'angle peut être en degrés (0deg = bas vers haut, 90deg = gauche vers droite) ou en mot-clé : to right, to bottom right.

Dégradés radiaux: transition vers l'extérieur depuis un point central :

background: radial-gradient(circle, #FF5733, #3498DB);

Points de couleur

Les deux types de dégradé acceptent un nombre quelconque de points de couleur. Vous pouvez spécifier des positions optionnelles pour contrôler où chaque couleur commence :

background: linear-gradient(to right, red 0%, yellow 50%, green 100%);

Utilisations des dégradés en CSS

• Arrière-plan: background: linear-gradient(...);
• Texte en dégradé: combinaison de background-clip: text et -webkit-text-fill-color: transparent
• Masque de fondu: utilisez un dégradé comme mask-image pour des effets de fondu aux bords
• Bordure en dégradé: utilisez border-image avec un dégradé

Compatibilité navigateurs

linear-gradient et radial-gradient sont supportés par tous les navigateurs modernes depuis IE 10. Aucun préfixe vendeur n'est nécessaire.