Centre de Connaissances & Guide
Générateur de Dégradés Mesh CSS et Arrière-plans Fluides
Générateur de Dégradés Mesh CSS et Arrière-plans Fluides
Cet outil fonctionne à 100% côté client dans votre navigateur. Vos codes sources, jetons d'accès, clés API et données sensibles ne quittent jamais votre appareil.
Formule & Méthode de Calcul
Mesh = background-image: radial-gradient(at [X] [Y], [Color], transparent), ...
CSS mesh gradients are actually an optical illusion created by stacking multiple distinct `radial-gradient` layers on top of each other and allowing their translucent edges to bleed together.
Bonnes Pratiques & Conseils
- Limit Color Nodes for Performance: Stacking 15 radial gradients on a single element forces the browser GPU to calculate massive matrix overlays on every frame. Keep it under 6 nodes for smooth 60fps scrolling on mobile.
- Use Analogous Colors: A mesh gradient looks terrible if you blend complementary colors (like pure Red and pure Green), resulting in a muddy brown center. Stick to adjacent colors on the color wheel (e.g., Blue, Purple, Pink).
- Animate with CSS Variables: You cannot cleanly transition the raw `background-image` property. To animate a mesh gradient, bind the X/Y coordinates to CSS custom properties (variables) and animate those using `@keyframes`.
Foire Aux Questions
Pourquoi observe-t-on des bandes de couleur (banding) sur mon écran ?
Les bandes de couleur apparaissent lorsque les moniteurs manquent de profondeur de bits pour afficher la transition fluide entre deux teintes similaires. L'ajout d'une très subtile texture de bruit CSS (grain) corrige instantanément ce phénomène par tramage (dithering) des pixels.
Puis-je l'enregistrer au format PNG plutôt qu'en CSS ?
Bien que le CSS pur soit infiniment redimensionnable et ne consomme aucune bande passante, si le dégradé est trop complexe pour les puces graphiques mobiles, il est vivement recommandé de capturer le canvas et de l'utiliser sous forme d'image WEBP optimisée.
Is a Mesh Gradient different from a Conic Gradient?
Yes. Conic gradients sweep colors around a central pivot point (like a pie chart), whereas mesh gradients use multiple overlapping radial bursts to create irregular, organic blobs.