Gradient Morph
Un fond en maillage de gradients floutés permute en fondu entre deux palettes chromatiques opposées toutes les quelques secondes.
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
Chaque palette est une couche div positionnée en absolu avec inset: -25% — elle déborde de 25 % de chaque côté du conteneur pour que les gradients couvrent uniformément les coins. La couche est remplie de quatre radial-gradient() placés à des coordonnées précises (haut-gauche, haut-droite, bas-centre, coin bas-gauche) et aplatie par filter: blur(30px), qui fond les halos colorés en un maillage continu sans bords visibles.
La permutation entre palettes repose sur une transition CSS opacity 2s ease-in-out appliquée aux deux couches simultanément : la couche entrante monte de 0 à 1 pendant que la sortante descend de 1 à 0 — un vrai fondu-enchaîné sans artefact. Les classes .active et .inactive sont commutées par un court intervalle JS (setInterval) toutes les ~3,5 secondes.
La palette chaude (scheme-a) combine rouge vif, orange, magenta et jaune ; la palette froide (scheme-b) répond avec bleu ciel, vert d'eau, violet et bleu marine. Les deux palettes n'ont aucune couleur en commun — l'écart chromatique maximal rend la transition spectaculaire même à vitesse lente.
L'effet n'utilise ni <canvas> ni requestAnimationFrame : deux <div> et des propriétés CSS natives suffisent. Le coût GPU se limite au compositing du filtre blur et aux transitions d'opacité — aucune boucle de peinture ne tourne en dehors des transitions actives.
Accessibilité
- prefers-reduced-motion absent du code fourni — aucune règle CSS ni branche JS ne détecte la préférence système. Pour un usage accessible, ajouter
@media (prefers-reduced-motion: reduce) { .morph-mesh-layer { transition: none } }et stopper lesetIntervalsi réduit. - Le conteneur
.morph-meshne porte pas deroleni d'aria-labeldans le code de base — ajouterrole="img" aria-label="…"si cet élément est la pièce maîtresse visuelle de la zone. - Le span
.morph-mesh-label(texte « MORPH ») est purement décoratif dans la démo ; en production, ajouteraria-hidden="true"ou le supprimer. - Aucune interactivité clavier ni focus dans le code : pas de
tabindexà gérer. - Contraste des textes superposés : à vérifier selon la palette active. Un scrim semi-transparent (ratio ≥ 4,5:1 WCAG AA) est recommandé dès que du texte repose sur le maillage.
Compatibilité navigateur
Requiert CSS radial-gradient, filter: blur et transition opacity — supportés dans tous les navigateurs modernes. Zéro dépendance externe.
Sans JS, la palette chaude (<code>scheme-a</code>) reste visible en statique — le fond coloré est présent, seule la permutation disparaît. Sans support de <code>filter: blur</code> (très anciens navigateurs), les gradients s'affichent nets mais restent colorés.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="morph-mesh" id="morphMesh" role="img" aria-label="Fond en maillage de gradients qui permute entre deux palettes de couleurs">
<div class="morph-mesh-layer scheme-a active" aria-hidden="true"></div>
<div class="morph-mesh-layer scheme-b inactive" aria-hidden="true"></div>
<!-- Facultatif : contenu overlay -->
</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 |
|---|---|---|
| .morph-mesh-layer.scheme-a { background } | rouge, orange, magenta, jaune | 4 radial-gradient() composant la palette chaude — remplacer les rgba() par vos tons chauds brand. |
| .morph-mesh-layer.scheme-b { background } | bleu ciel, vert d'eau, violet, bleu marine | 4 radial-gradient() composant la palette froide — remplacer par vos tons froids ou une deuxième déclinaison brand. |
| .morph-mesh-layer { filter: blur(…) } | blur(30px) | Intensité du flou : réduire à 12 px pour un maillage plus net, augmenter à 50 px pour un fondu encore plus doux et atmosphérique. |
| .morph-mesh-layer { inset: … } | -25% | Débordement des couches hors du conteneur — augmenter à -40 % pour une couverture plus dense des coins, réduire à -10 % pour un maillage plus concentré. |
| .morph-mesh-layer { transition: opacity … } | opacity 2s ease-in-out | Durée et easing du fondu-enchaîné : 0.8 s pour une bascule vive, 4 s pour une transition quasi-imperceptible. |
| setInterval(toggle, délai) | ~3 500 ms | Fréquence de permutation des palettes — ajuster le délai en ms selon le rythme voulu (6 000 ms = lent et contemplatif, 1 500 ms = nerveux et dynamique). |
| .morph-mesh { border-radius } | 16px | Arrondi du conteneur : 0 pour plein écran bord à bord, 50 % pour un blob circulaire (ex. avatar ou badge). |
FAQ
scheme-a) reste affichée en statique grâce à opacity: 1 dans le CSS — le fond coloré est présent. Seule la permutation disparaît : elle nécessite un court script (~10 lignes) qui bascule les classes .active/.inactive via setInterval.<div class="morph-mesh-layer scheme-c"> avec ses propres radial-gradient(), initialisez-la à opacity: 0, puis faites tourner le JS sur 3 états en cadence (A→B→C→A…). La transition CSS s'appliquera identiquement à chaque couche..morph-mesh en position: absolute; inset: 0; width: 100%; height: 100% dans un conteneur position: relative; overflow: hidden. Passez border-radius à 0 et l'inset des couches à -30% ou plus pour que les gradients couvrent parfaitement les coins à toutes les tailles.
