Comment utiliser les dégradés CSS
Les dégradés CSS vous permettent d'afficher des transitions douces entre deux couleurs ou plus. Ils sont rendus par le navigateur sous forme d'images CSS, alors associez le dégradé à une couleur de secours pour les clients plus anciens ou les images d'arrière-plan désactivées.
Comment utiliser cet outil
- Choisissez le type de dégradé (linéaire ou radial)
- Pour linéaire, ajustez l'angle avec le curseur
- Choisissez des couleurs à l'aide des sélecteurs de couleurs et définissez des pourcentages de position
- Ajoutez d'autres arrêts de couleur avec le bouton "+ Ajouter"
- Copiez le code CSS généré en un clic
La syntaxe des dégradés est largement prise en charge dans les navigateurs actuels, mais le rendu exact des couleurs peut varier. Pour référence, voir le MDN CSS documentation du dégradé.
Pour plus d'outils de développement, consultez notre Sélecteur de couleurs et Testeur d'expressions régulières.
Le générateur de dégradé CSS crée un dégradé linéaire et radial CSS avec jusqu'à huit arrêts de couleur, un aperçu en direct et une couleur d'arrière-plan de secours. Utilisez-le pour les sections de héros, les boutons, les cartes et les surfaces décoratives de l'interface utilisateur, puis testez le contraste du texte dans le composant où le dégradé sera réellement livré.