Dégradé Mesh CSS
Créez de beaux fonds dégradés mesh avec 4 points de couleur et un flou réglable. Copiez le CSS pur et utilisez-le dans n'importe quel projet.
① Choisissez 4 couleurs pour chaque coin ② Ajustez l'intensité du flou ③ Copiez le CSS généré
Couleur haut-gauche
#C9B89A
Couleur haut-droite
#7A5C38
Couleur bas-gauche
#1A3A5C
Couleur bas-droite
#2A5A3A
Intensité du flou (px): 160px
Comment ça marche
Le dégradé mesh utilise quatre couches radial-gradient, chacune ancrée à un coin. Les dégradés se fondent via la transparence CSS, et l'intensité du flou contrôle l'étendue de chaque dégradé.
Intensité du flou
Des valeurs de flou plus élevées font s'étendre les dégradés plus loin et les fondent plus doucement. Des valeurs plus basses gardent chaque couleur plus concentrée à son coin.
Sortie CSS
Le CSS généré utilise background-color comme base et empile plusieurs définitions radial-gradient sur background-image. Pas de JavaScript ou de canvas nécessaire.
background-color: #c9b89a;
background-image:
radial-gradient(ellipse at 0% 0%, #c9b89a 0%, transparent 160px),
radial-gradient(ellipse at 100% 0%, #7a5c38 0%, transparent 160px),
radial-gradient(ellipse at 0% 100%, #1a3a5c 0%, transparent 160px),
radial-gradient(ellipse at 100% 100%, #2a5a3a 0%, transparent 160px);
Qu'est-ce qu'un dégradé mesh ?
Un dégradé mesh est un mélange de couleurs multi-points fluide qui produit des arrière-plans liquides, ressemblant à des aurores. Contrairement à un dégradé linéaire ou radial standard, un dégradé mesh place plusieurs points de couleur sur la surface et interpole entre eux. L'implémentation CSS utilise des couches radial-gradient superposées ancrées à chaque coin — une technique légère, sans images, compatible avec tous les navigateurs modernes.
Questions fréquentes
Un dégradé mesh est un type de dégradé qui mélange plusieurs couleurs placées à différents points sur une surface, plutôt qu'entre deux extrémités. Le résultat est un champ de couleur fluide et organique qui ressemble à des aurores ou des effets de lumière douce.
Le dégradé mesh CSS utilise quatre couches radial-gradient — une ancrée à chaque coin — qui s'étendent vers l'extérieur et se fondent dans la transparence. Ces couches sont empilées sur background-image et se fondent naturellement où elles se chevauchent.
Un dégradé linéaire fait la transition entre les couleurs le long d'un seul axe. Un dégradé mesh place des points de couleur à des positions arbitraires, produisant un mélange de couleurs multi-directionnel fluide.
Le flou contrôle le rayon d'étalement de chaque couche radial-gradient. Une valeur plus élevée fait s'étendre chaque couleur plus loin avant de s'estomper vers le transparent, créant des fondus plus longs et plus doux.
Les dégradés mesh CSS uniquement sont limités aux points d'ancrage aux coins. Les vrais dégradés mesh (comme dans Figma ou Illustrator) peuvent avoir des points de couleur n'importe où sur la surface.
Copiez le CSS et appliquez-le à tout élément HTML, comme une section hero, le body ou un conteneur de carte. Le background-color assure une couverture complète comme solution de secours.
La fonction radial-gradient est supportée dans tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) depuis 2013. Le CSS généré n'a aucun problème de compatibilité pour les sites modernes.