Pastel Mesh
Fond maillé CSS pur : deux couches de dégradés radiaux floutés dérivent en sens opposés pour composer une atmosphère douce en lavande, menthe et pêche — aucun JavaScript requis.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Backgrounds comprend 50 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Tout l'effet repose sur deux pseudo-éléments CSS (::before et ::after) superposés sur .pastel-mesh. Chacun porte un empilement de dégradés radiaux positionnés via l'argument at x% y% : cinq blobs de couleur sur ::before (lavande, menthe, pêche, bleu ciel, rose) et deux blobs de renforcement sur ::after (lavande clair, menthe clair). Les blobs se combinent par transparence pour créer la texture maillée.
Un filter: blur(35px) sur ::before et blur(30px) sur ::after fondent les bords des blobs en une nappe de couleur homogène. Les pseudo-éléments s'étendent au-delà du conteneur (inset: -25% et -20%) pour éviter que les bords durs des dégradés ne soient visibles — overflow: hidden sur .pastel-mesh masque le débordement.
L'animation @keyframes pastelFlow applique un déplacement lent (translate ± 5 %, scale ± 3 %, rotation ± 2°) en cinq étapes irrégulières. ::before anime sur 15 s en alternate et ::after sur 12 s en alternate-reverse : les deux couches dérivent en sens opposés, ce qui crée une impression de profondeur et de mouvement organique sans jamais boucler brusquement.
L'effet est 100 % CSS, sans JavaScript et sans dépendance externe. Il fonctionne dans tout conteneur à position: relative; overflow: hidden et s'adapte à n'importe quelle taille en héritant du flux.
Accessibilité
- prefers-reduced-motion non géré : le code ne contient aucun bloc
@media (prefers-reduced-motion: reduce)— l'animation tourne en permanence. À ajouter en production :@media (prefers-reduced-motion: reduce) { .pastel-mesh::before, .pastel-mesh::after { animation: none; } }. - Pas d'attributs
aria-*dans le markup de base. Si le fond transporte un sens visuel, ajouterrole="img"etaria-labelsur.pastel-mesh; sinonaria-hidden="true"est préférable pour éviter un nœud vide dans l'arbre d'accessibilité. - Contraste du texte overlay (
.pastel-mesh-label) : texte blanc à 85 % d'opacité sur dégradé pastel — ratio variable selon la zone sous le texte. Vérifier avec un outil de contraste en ciblant la zone la plus claire du dégradé. - Aucune interaction clavier ni pointeur — l'effet est purement décoratif et ne capte aucun événement.
- Sans support CSS animations ou
filter, le conteneur affiche le fond sombre uni (#1a1520) — aucune erreur JS, la page reste fonctionnelle.
Compatibilité navigateur
CSS pur : nécessite radial-gradient, @keyframes et filter: blur() — supportés dans tous les navigateurs modernes depuis 2016.
Sans <code>filter: blur()</code> (très anciens navigateurs), les blobs s'affichent avec des bords durs mais restent lisibles. Sans <code>@keyframes</code>, le dégradé est statique — aucune erreur fatale.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="pastel-mesh">
<!-- Facultatif : contenu overlay -->
<span class="pastel-mesh-label">Votre texte</span>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| Couleurs ::before (5 blobs) | lavande #c8aaff, menthe #aaffd2, pêche #ffc8b4, bleu ciel #b4d2ff, rose #ffb4dc | Remplacez les valeurs rgba() dans les 5 radial-gradient de .pastel-mesh::before pour changer la palette. Conservez des opacités entre 0,4 et 0,65 pour garder le rendu doux. |
| Couleurs ::after (2 blobs de renforcement) | lavande clair #dcc8ff (0,35), menthe clair #c8ffe6 (0,30) | Ces blobs ajoutent de la profondeur. Réduire leurs opacités à 0,15–0,20 pour un effet plus épuré ; augmenter au-delà de 0,5 pour intensifier les reflets centraux. |
| filter: blur() sur ::before | 35px | Douceur des blobs. Entre 20 px (blobs plus distincts, style tie-dye) et 60 px (fondu total, couleur quasi-unie). Ajuster ::after proportionnellement (défaut 30 px). |
| animation-duration sur ::before | 15s | Vitesse de dérive de la couche principale. 8 s = vivant, 30 s = quasi-imperceptible. Modifier ::after indépendamment (défaut 12 s) pour accentuer le déphasage entre les deux couches. |
| inset sur ::before / ::after | -25% / -20% | Extension des pseudo-éléments hors du conteneur. Réduire à -10% si le flou suffit à masquer les bords ; augmenter à -40% si des bords durs apparaissent à certaines résolutions. |
| background sur .pastel-mesh | #1a1520 | Fond visible dans les zones où les dégradés sont transparents. Changer vers un blanc cassé (#faf8ff) inverse l'ambiance vers un rendu lumineux ; #0d0d1a renforce la profondeur nocturne. |
| border-radius sur .pastel-mesh | 16px | Arrondi du conteneur. 0 pour un hero plein bord, 24px pour une carte, 50% pour un fond circulaire (avatar, badge). |
FAQ
.pastel-mesh dans un composant, il ne touche rien en dehors de son propre arbre DOM.rgba() dans les radial-gradient de .pastel-mesh::before (5 blobs) et ::after (2 blobs). Conservez des opacités entre 0,4 et 0,65 pour rester dans un rendu doux — au-delà de 0,8, les couleurs saturent et perdent l'aspect pastel.filter: blur() et les animations CSS sont accélérés GPU sur tous les navigateurs mobiles modernes depuis 2016. La charge est négligeable comparée à un canvas animé. Sur des appareils très anciens, enveloppez les animations dans @supports (filter: blur(1px)) { … } et proposez le fond statique en repli.
