Générateur de dégradé maillé (mesh gradient)
Créez des fonds CSS doux de style mesh à partir de dégradés radiaux superposés. Déplacez les points de couleur, réglez l'étendue, randomisez avec une graine, copiez le CSS.
Réglages du maillage
Points de couleur
Aperçu
Faites glisser les poignées dans l’aperçu ou saisissez des valeurs exactes.
background-color: #ff99cc; background-image: radial-gradient(at 0% 0%, #ffb3ba 0, transparent 50%), radial-gradient(at 100% 0%, #bae1ff 0, transparent 50%), radial-gradient(at 100% 100%, #baffc9 0, transparent 50%), radial-gradient(at 0% 100%, #ffffba 0, transparent 50%);
Outils Connexes
Voir ToutQu'est-ce que Générateur de dégradé maillé ?
Crée le célèbre rendu doux de « mesh gradient » en simple CSS : une couleur de fond plus plusieurs dégradés radiaux, chacun partant d'un point de couleur et se fondant en transparent. Vous placez jusqu'à huit points en les faisant glisser dans l'aperçu ou en saisissant leur position.
Comment utiliser Générateur de dégradé maillé
- Choisissez une Couleur de fond.
- Sélectionnez un point de couleur et réglez sa Couleur, son Étendue et sa Position en X / Position en Y, ou faites-le glisser dans l'aperçu.
- Utilisez Ajouter un point / Supprimer le point pour changer le nombre de couleurs mélangées (1–8).
- Cliquez sur Aléatoire pour un nouveau maillage, ou saisissez une Graine et cliquez sur Appliquer la graine pour en obtenir un reproductible.
- Copiez le code CSS.
Exemple
Default 4 points, background #ff99cc
background-color: #ff99cc; background-image: radial-gradient(at 0% 0%, #ffb3ba 0, transparent 50%), radial-gradient(at 100% 0%, #bae1ff 0, transparent 50%), radial-gradient(at 100% 100%, #baffc9 0, transparent 50%), radial-gradient(at 0% 100%, #ffffba 0, transparent 50%);
Quand utiliser Générateur de dégradé maillé
Utilisez-le pour des fonds de bandeaux, des pages d'atterrissage, des écrans d'accueil d'applications et des arrière-plans colorés flous derrière des cartes en glassmorphisme. Si vous avez besoin de transitions de couleurs droites et précises, utilisez le générateur de dégradé CSS ; pour une vraie déformation de maillage, il faut un outil vectoriel ou un shader canvas/WebGL.
Comment fonctionne Générateur de dégradé maillé
Chaque point devient radial-gradient(at x% y%, couleur 0, transparent étendue%) et tous sont listés dans background-image au-dessus de background-color. Comme chaque dégradé se fond en transparent, les couleurs se recouvrent et se mélangent en douceur. Aléatoire utilise un générateur pseudo-aléatoire à graine (mulberry32) : la même graine et le même nombre de points produisent toujours les mêmes couleurs et positions. C'est une approximation des vrais dégradés maillés (que CSS n'a pas), et non un maillage de patchs bilinéaires.
Cas d'utilisation courants
- Fonds de bandeaux de pages d'atterrissage
- Arrière-plans pour cartes en glassmorphisme
- Visuels de remplacement colorés pour des couvertures d'articles
- Écrans d'accueil d'applications
- Fonds reproductibles grâce aux graines dans des design systems
Questions Fréquentes
Est-ce un vrai dégradé maillé ?
Aucune propriété CSS ne dessine de vrais dégradés maillés. Superposer des dégradés radiaux qui se fondent en transparent est la technique CSS standard qui produit un rendu doux très similaire.
À quoi sert Étendue ?
C'est la distance (en pourcentage de l'élément) à laquelle la couleur d'un point a totalement disparu. Des valeurs plus grandes font couvrir plus de surface à la couleur.
Puis-je retrouver le même maillage aléatoire ?
Oui. Notez la valeur de la Graine et cliquez plus tard sur Appliquer la graine ; la même graine avec le même nombre de points recrée le même maillage.