Générateur Dégradés CSS
Type de dégradé
Point de couleur
CSS généré
background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);Préréglages
Questions Fréquentes
Tout ce que vous devez savoir sur les dégradés CSS
Que sont les dégradés CSS ?
Les dégradés CSS sont des transitions fluides entre deux couleurs ou plus, créées sans images. Ils se déclinent en linéaires (d'un point à l'autre), radiaux (du centre vers l'extérieur) et coniques (rotation autour d'un point central). Pris en charge par tous les navigateurs modernes.
Comment fonctionnent les points de couleur ?
Les points de couleur définissent la couleur et la position (0-100%) à laquelle cette couleur apparaît dans le dégradé. Entre deux points, le navigateur crée automatiquement la transition. Vous pouvez ajouter jusqu'à 4 points pour créer des dégradés complexes.
Puis-je utiliser des dégradés sur les textes et les bordures ?
Oui ! Pour les textes utilisez : `background: gradient; -webkit-background-clip: text; color: transparent;`. Pour les bordures utilisez la propriété `border-image`. Le générateur crée le CSS pour le fond, mais les mêmes règles de couleur s'appliquent partout.
Quelle différence entre dégradé linéaire, radial et conique ?
Le linéaire va d'un point à un autre selon un angle, le radial s'ouvre du centre vers le bord, et le conique tourne autour du centre. Tous les navigateurs à jour les prennent en charge.
À quoi servent les color stops ?
Chaque color stop donne une couleur et sa position de zéro à cent dans le dégradé, et entre deux stops le navigateur calcule le fondu. On peut utiliser jusqu'à quatre stops.
Le dégradé peut-il servir sur du texte ?
Oui. Il s'applique en arrière-plan puis se découpe sur le texte avec background-clip réglé sur text et la couleur rendue transparente. Pour les bordures, on utilise plutôt la propriété border-image.