Mode d'emploi
- Dans Type, choisissez Linéaire.
- Réglez Angle entre 0 et 360 pour orienter le dégradé.
- Dans Arrêts de couleur, saisissez les codes hexadécimaux de vos couleurs.
- Cliquez sur + Ajouter un arrêt de couleur si vous souhaitez une couleur supplémentaire.
- Cliquez sur Copier le CSS pour copier la déclaration complète, ou sur Copier la valeur pour copier seulement le dégradé. Sans sélectionner de texte, Ctrl+Maj+C ou Cmd+Maj+C copie aussi la déclaration CSS.
Exemples
Fond à trois couleurs pour une boutique
Linéaire, 90° · corail #F97360 à 0 % · rose #EC4899 à 50 % · violet #7C3AED à 100 %
background: linear-gradient(90deg, #F97360 0%, #EC4899 50%, #7C3AED 100%);
Halo pour une bannière
Radial, ellipse en haut à gauche · bleu clair #BAE6FD à 0 % · bleu #2563EB à 60 % · bleu nuit #172554 à 100 %
background: radial-gradient(ellipse at top left, #BAE6FD 0%, #2563EB 60%, #172554 100%);
Roue de couleurs décorative
Conique, 0°, au centre · rose #DB2777 à 0 % · jaune #FACC15 à 33 % · bleu #2563EB à 67 % · rose #DB2777 à 100 %
background: conic-gradient(from 0deg at center, #DB2777 0%, #FACC15 33%, #2563EB 67%, #DB2777 100%);
Astuces
- Choisissez des couleurs exactes et vérifiez le contraste avec le sélecteur de couleur.
- Testez le dégradé dans une page avec l'éditeur HTML.
FAQ
Pourquoi mon dégradé répété ne se répète-t-il pas visiblement ?
Avec Répété activé, un dernier arrêt à 100 % n’a pas d’effet visible. Placez-le plus bas, par exemple à 25 %, pour obtenir un motif répété.
Comment créer un dégradé vers la transparence ?
Saisissez une couleur hexadécimale avec un canal alpha : #2451E800 met l'Opacité de cet arrêt à 0 et le rend entièrement transparent. Vous pouvez aussi régler directement le champ Opacité. Le code généré utilise rgba() pour les couleurs qui ne sont pas totalement opaques.
Comment obtenir une séparation nette entre deux couleurs ?
Placez deux arrêts de couleurs différentes à la même position, par exemple à 50 %. Cela crée une coupure nette plutôt qu’une transition progressive.
Mon dégradé est-il conservé quand je ferme la page ?
Le dernier état valide est enregistré dans le localStorage de votre navigateur et restauré à la prochaine visite. Cliquez sur Réinitialiser pour supprimer cet état et revenir au dégradé par défaut.