Générateur de dégradé CSS
Choisissez les couleurs et un angle, regardez l'aperçu et copiez le CSS du fond.
Créer un dégradé CSS en ligne
Les fonds en dégradé servent aux bandeaux d'accueil, aux boutons, aux cartes et aux calques posés sur des photos. Cette page ouvre le Générateur CSS sur son onglet dégradé : vous essayez angles et couleurs à l'œil et copiez la ligne de CSS exacte.
Exemples
| CSS | Résultat |
|---|---|
linear-gradient(90deg, #6c5ce7 0%, #00b894 100%) | Du violet à gauche au vert à droite |
linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%) | Fondu sombre en bas, pour garder un texte lisible sur une photo |
radial-gradient(circle, #ffffff 0%, #dfe6e9 100%) | Tache de lumière douce au centre |
conic-gradient(from 0deg, #e17055 0% 25%, #0984e3 25% 100%) | Un diagramme circulaire au quart |
Conseils
Des couleurs proches sur la roue chromatique se fondent en douceur ; des couleurs opposées ont tendance à grisailler au milieu, ce qu'une couleur intermédiaire corrige. Pensez au contraste du texte : vérifiez la partie la plus claire et la plus sombre du dégradé face à la couleur du texte.
Outils associés
Pour l'ombre du même élément, voyez le générateur de box-shadow. Pour convertir une couleur en HEX, RGB ou HSL, utilisez le convertisseur de couleurs.