Générateur de dégradé CSS
Composez un dégradé mesh, linéaire, radial ou conique, ajoutez du grain et du vignettage, puis récupérez le CSS ou exportez l'image en PNG.
L'image est dessinée dans votre navigateur, puis enregistrée directement sur votre appareil. Rien n'est envoyé à un serveur.
Le grain, ou pourquoi un dégradé plat paraît terne
Un dégradé pur est une interpolation mathématique entre deux couleurs. Sur un écran en 8 bits par canal, cette progression n'a pas toujours assez de valeurs intermédiaires disponibles : le passage se fait alors par paliers visibles, en bandes horizontales. Ce défaut porte un nom, le banding, et il est d'autant plus marqué que le dégradé est étendu et que les deux couleurs sont proches.
Ajouter un bruit léger casse ces paliers : chaque pixel est décalé de façon aléatoire d'une valeur infime, ce qui disperse la frontière entre deux bandes au lieu de la laisser former une ligne droite. La technique vient de l'imprimerie et du cinéma, où elle s'appelle le tramage. C'est exactement ce que font les fonds d'OpenAI, de Stripe ou de Linear : un dégradé très diffus, plus une couche de grain fin qui lui donne une matière.
Ici le bruit est produit par le filtre SVG feTurbulence en mode fractalNoise, désaturé pour rester neutre, et embarqué dans le CSS en data-URI. Le curseur Grain règle son opacité, le curseur Finesse la fréquence de base : plus elle est haute, plus le grain est serré. Entre 35 et 50 d'intensité, l'effet se voit sans que la texture ne prenne le pas sur les couleurs.
Quel type de dégradé choisir
| Type | Propriété CSS | Quand l'utiliser |
|---|---|---|
| Mesh | Plusieurs radial-gradient superposés | Le fond « moderne » des pages produit : des taches de couleur diffuses qui se fondent les unes dans les autres, sans direction lisible. C'est le type à choisir pour un en-tête ou une image de partage. |
| Linéaire | linear-gradient() | Transition le long d'un axe, réglé par l'angle. Le plus lisible et le plus économe : idéal pour un bouton, une bannière ou un fond de section. |
| Radial | radial-gradient() | Transition depuis un centre vers les bords. Sert à créer un halo ou à concentrer le regard au milieu de la composition. |
| Conique | conic-gradient() | Les couleurs tournent autour d'un point, comme les parts d'un camembert. Utile pour un anneau de progression, un effet prisme ou une bordure irisée. |
Le mesh n'est pas une propriété CSS à part entière : c'est une superposition de plusieurs radial-gradient() dont chaque tache passe de sa couleur à la transparence. C'est pour cela qu'il n'y a pas d'angle à régler, mais une position et un rayon par tache. Le fond visible entre les taches est une simple background-color, ce qui explique qu'un fond sombre rende presque toujours mieux : les couleurs s'y détachent au lieu de se laver.
Utiliser le résultat dans un projet
Le bloc CSS se colle tel quel dans une feuille de style. L'ordre des couches compte : dans background-image, la première valeur listée est celle du dessus. Le grain arrive donc en premier, le vignettage ensuite, le dégradé en dernier. La propriété background-size qui accompagne le grain est nécessaire, car le motif de bruit se répète sur 180 px alors que les autres couches doivent couvrir tout l'élément.
Pour un texte posé par-dessus, vérifiez le contraste après avoir appliqué le vignettage : il assombrit les bords et peut faire passer un texte clair sous le seuil de lisibilité au centre de la composition. L'export PNG sert surtout aux usages où le CSS n'est pas disponible — une image de partage Open Graph, un fond de présentation, une couverture de réseau social — d'où les formats proposés.
Choisissez le type Mesh, prenez deux à quatre couleurs proches sur un fond sombre, puis montez le curseur Grain entre 35 et 50 en gardant la finesse haute. C'est cette combinaison — dégradé très diffus plus bruit fin — qui donne l'aspect « velours » des fonds d'OpenAI, Stripe ou Linear. Le vignettage à 20-30 accentue encore la profondeur.
Non. Le grain est un filtre SVG feTurbulence embarqué directement dans le CSS sous forme de data-URI. Le code que vous copiez est autonome : aucun fichier à téléverser, aucune requête réseau supplémentaire, et le motif reste net sur les écrans haute densité puisqu'il est généré par le navigateur.
L'aperçu est rendu par le moteur CSS du navigateur, qui applique le filtre feTurbulence. Le PNG est redessiné sur un canvas, où ce filtre n'est pas rejouable tel quel : le grain y est reproduit par un bruit par pixel d'aspect équivalent. Les couleurs et la composition sont identiques, la texture du grain est très proche mais pas bit à bit.
conic-gradient() est pris en charge par toutes les versions récentes de Chrome, Firefox, Safari et Edge. Sur un navigateur ancien, la propriété est simplement ignorée : prévoyez une background-color de repli déclarée avant le dégradé si votre texte a besoin d'un contraste garanti.
Non. Le CSS est construit et l'image dessinée entièrement dans votre navigateur, en JavaScript. Aucune configuration ne transite par un serveur et rien n'est conservé après la fermeture de l'onglet.
Deux ou trois suffisent presque toujours. Au-delà, les teintes se neutralisent et le résultat vire au gris là où elles se croisent. Le plus efficace est de rester dans un même voisinage chromatique — deux bleus et un violet, par exemple — plutôt que d'opposer des couleurs complémentaires.