Sunset Mesh
Deux couches de dégradés radiaux floutées s'animent en CSS pur — orange, rose, rouge et violet tournent en boucle sans une ligne de JavaScript.
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
L'effet repose sur la technique du mesh gradient CSS : plusieurs fonctions radial-gradient(at X% Y%, couleur 0, transparent 50%) sont empilées sur la propriété background d'un même élément. Chaque appel crée un blob de couleur centré sur des coordonnées précises — trois blobs par couche, six au total — dont les zones transparentes se fondent naturellement pour former un maillage chromatique continu.
Les deux couches ont position: absolute; inset: -30% : elles débordent du conteneur parent de 30 % sur chaque côté, soit 160 % de sa largeur et de sa hauteur. Pendant les animations de scale et translate, aucun bord sombre n'apparaît car les blobs de couleur restent toujours plus larges que le cadre visible (overflow: hidden sur .sunset-mesh masque le débordement).
Un filter: blur(25px) sur la première couche et blur(30px) sur la seconde fusionne les bords durs des dégradés radiaux en transitions douces et continues. Plus la valeur de blur est élevée, plus le fondu est onctueux ; descendre à 8-12 px révèle des zones de couleur distinctes.
Deux animations CSS asynchrones créent un mouvement organique : sunsetPulse (scale 1 → 1,1 → 0,95 → 1,05 → 1 accompagné de translations décalées, 10 s sur la couche 1) et sunsetDrift (translate + rotation 5°, 14 s en animation-direction: alternate) sur la couche 2. Parce que les durées ne sont pas des multiples entiers l'une de l'autre et que la couche 2 oscille en aller-retour, la composition ne se répète jamais à l'identique.
Accessibilité
- prefers-reduced-motion absent du code : aucune
@media (prefers-reduced-motion: reduce)n'arrête les animations. À ajouter dans votre intégration :@media (prefers-reduced-motion: reduce) { .sunset-mesh-layer { animation: none !important; } }— les couches restent visibles comme dégradé statique. - Le HTML de base ne comporte ni
aria-hidden, nirole="img", niaria-label— ajoutezrole="img" aria-label="Fond animé coucher de soleil"sur.sunset-meshsi l'élément est porteur de sens. - Le texte
.sunset-mesh-label(rgba(255,255,255,.9)) sur fond sombre (#0a0a0f) présente un ratio de contraste ≥ 7:1 (WCAG AAA) ; les zones chaudes du dégradé peuvent le réduire localement — à vérifier avec votre propre palette de couleurs. - Aucun élément interactif dans l'effet : navigation au clavier et gestion du focus non concernées.
- Les animations sont des transitions lentes (10-14 s) sans brusquerie ni clignotement : conformes à WCAG 2.3.1 (seuil de flash < 3 flashs/s).
Compatibilité navigateur
Nécessite CSS radial-gradient(), filter: blur(), @keyframes et la propriété raccourcie inset — supportée depuis Chrome 87, Firefox 87 et Safari 14.1.
Sur les navigateurs sans support de <code>filter: blur()</code> (IE 11), les couches s'affichent comme dégradés radiaux statiques sans fondu — visuellement dégradé mais sans erreur JS. La propriété <code>inset</code> peut être remplacée par <code>top: -30%; right: -30%; bottom: -30%; left: -30%</code> pour les navigateurs Edge antérieurs à la version 87.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="sunset-mesh">
<div class="sunset-mesh-layer"></div>
<div class="sunset-mesh-layer"></div>
<!-- Facultatif : texte ou contenu superposé -->
<span class="sunset-mesh-label">SUNSET</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 |
|---|---|---|
| Positions at X% Y% (layer 1) | 30% 20% · 70% 30% · 50% 80% | Coordonnées des trois blobs de couleur dans .sunset-mesh-layer:nth-child(1) — déplacez-les pour repositionner les masses orange, rose et violet dans le cadre. |
| RGBA layer 1 | rgba(255,120,0,.7) · rgba(255,60,100,.6) · rgba(180,0,180,.5) | Teintes des blobs orange, rose-rouge et violet de la couche 1 — remplacez par votre palette brand (ex. rgba(0,120,255,.7) pour une ambiance froide). |
| RGBA layer 2 | rgba(255,50,50,.5) · rgba(255,180,0,.4) · rgba(200,0,150,.45) | Teintes rouge, or et magenta de la couche 2 — conserver l'alpha ≤ 0,5 pour rester sous l'intensité de la couche 1. |
| filter: blur() — couche 1 | blur(25px) | Flou gaussien de .sunset-mesh-layer:nth-child(1) — augmenter (40px+) pour un fondu très doux ; descendre (8-12px) pour des zones de couleur distinctes. |
| filter: blur() — couche 2 | blur(30px) | Flou gaussien de .sunset-mesh-layer:nth-child(2), légèrement supérieur par défaut — à accorder avec la couche 1 selon le rendu souhaité. |
| animation-duration sunsetPulse | 10s (couche 1) | Durée du cycle scale+translate de la couche 1. Passer à 20-30s pour un fond ambiant ; descendre à 5s pour plus d'énergie. |
| animation-duration sunsetDrift | 14s | Durée de l'oscillation en alternate de la couche 2. Passer à 28s pour qu'un export statique ne capture jamais un état extrême. |
| inset — .sunset-mesh-layer | -30% | Débordement des layers hors du conteneur. Augmenter (ex. -40%) si des bords sombres apparaissent sur de grands viewports. |
| .sunset-mesh dimensions | width: 320px; height: 220px | Taille fixe de démo — passer à width: 100%; height: 100% (ou 100vh) pour que l'effet épouse n'importe quel conteneur parent. |
FAQ
width: 320px; height: 220px) par width: 100%; height: 100% sur .sunset-mesh et assurez-vous que son parent a une hauteur définie (ex. height: 100vh sur la section). La propriété inset: -30% des layers garantit que les bords restent invisibles quelle que soit la taille du conteneur.@media (prefers-reduced-motion). Pour une intégration accessible, ajoutez dans votre CSS : @media (prefers-reduced-motion: reduce) { .sunset-mesh-layer { animation: none !important; } } — les couches restent visibles comme dégradé statique, l'effet est préservé visuellement sans aucun mouvement.
