Fluid Gradient
Quatre taches de couleur floutées à 40 px — indigo, violet, cyan, magenta — sur un calque deux fois plus grand que le cadre, qui tournent et dérivent lentement (un cycle de 15 s) sous un vignettage sombre et un texte centré : un fond plein cadre qui bouge à peine, en CSS pur, 1,6 Ko, figé si l'utilisateur réduit les animations.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Liquid comprend 31 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le conteneur .fluid-gradient-container (toute la largeur, 300 px de haut via son style en ligne, overflow: hidden) empile trois éléments. Au fond, .fluid-gradient en inset: -50% : il déborde d'une demi-largeur et d'une demi-hauteur de chaque côté, soit deux fois la taille du cadre. Il porte quatre dégradés radiaux qui s'effacent à mi-rayon — indigo #6366f1 en bas à gauche, violet #8b5cf6 en haut à droite, cyan #06b6d4 et magenta #d946ef au centre — fondus ensemble par filter: blur(40px). Au-dessus, .fluid-overlay assombrit les bords (dégradé radial vers un noir à 50 %), puis .fluid-text centre le texte, blanc, gras, avec une ombre portée.
L'animation fluidFlow dure 15 s, en ease-in-out, et fait passer le calque par quatre poses : décalé de 10 % vers la droite et le haut, puis de 15 % vers le bas, puis vers la gauche, tout en tournant d'un tour complet (90° par quart de cycle) et en respirant entre 95 et 110 % de sa taille. Comme le calque est deux fois plus grand que le cadre, on ne voit jamais son bord : seules les taches glissent et se mêlent. En 500 ms, 11 à 13 % des pixels du cadre changent (mesuré dans Chromium, Firefox et WebKit) : assez pour que l'œil sente la vie, trop peu pour attirer le regard.
Le flou fait la matière : sans lui, on verrait quatre disques à bord net qui tournent. C'est aussi le poste le plus coûteux, car il s'applique à un calque quatre fois plus grand en surface que le cadre. Le navigateur peut toutefois peindre ce calque une fois et le déplacer ensuite, puisque l'animation ne touche que transform : mesuré dans Chromium 151, la page tient sa cadence (120 images par seconde) à 640 × 300 comme à 1920 × 1080, avec ou sans flou. Firefox 153 sans carte graphique (rendu logiciel) perd la moitié de ses images à 640 × 300 avec le flou, et rame en plein écran avec ou sans : vérifiez sur les machines visées avant d'en faire un fond plein écran.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, le calque s'arrête dans sa pose de départ (animation: none) : les quatre taches restent fondues, l'image est fixe. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : 0 % de pixels changés en 500 ms. - Contraste : le texte blanc est posé sur des couleurs qui bougent. Le vignettage et l'ombre portée (
text-shadownoir à 50 %) le gardent lisible sur les teintes d'origine ; si vous passez à des couleurs claires (pastels, jaune), foncez le vignettage ou ajoutez un voile sombre derrière le texte, comme dans l'exemple du parfumeur. - Décor : les taches sont des fonds CSS, sans rôle : les lecteurs d'écran ne lisent que le texte de
.fluid-text.
Compatibilité navigateur
CSS pur (dégradés radiaux, filter: blur(), animation de transform), 1,6 Ko, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : même dérive, même arrêt sous mouvement réduit. Le flou de 40 px sur un calque deux fois plus grand que le cadre est le point à surveiller sur les machines sans carte graphique (voir plus haut).
Sans filter: blur(), les quatre taches restent visibles en disques dégradés à bord doux, qui tournent toujours. Sans animation CSS, le fond est fixe et le texte reste lisible. Le conteneur tient sa hauteur de son style en ligne (min-height: 300px) : si vous le retirez, donnez-lui une hauteur dans votre CSS.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0400-root">
<div class="fluid-gradient-container" style="width:100%;min-height:300px;">
<div class="fluid-gradient"></div>
<div class="fluid-overlay"></div>
<div class="fluid-text">Mouvement fluide</div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Couleurs des taches (CSS — les quatre radial-gradient de .fluid-gradient) |
#6366f1, #8b5cf6, #06b6d4, #d946ef |
Chaque tache a sa position (circle at 20% 80%…) et sa couleur. Des teintes voisines donnent un fond calme ; des complémentaires (rouge et vert) se mêlent en brun au centre. |
Flou (CSS — filter: blur(40px)) |
40 px | 60 px fond tout en un voile ; 20 px laisse deviner le bord des taches. Un flou plus faible coûte moins cher à afficher. |
Durée du cycle (CSS — animation: 15s … fluidFlow) |
15 s | 30 s donne un fond presque immobile, pour un écran qu'on regarde longtemps ; 8 s une dérive bien visible, à réserver aux blocs courts. |
Vignettage (CSS — .fluid-overlay) |
radial-gradient(circle, transparent 0, rgba(10,10,15,.5) 100%) |
Montez l'opacité (0,7) pour un texte long ou des couleurs claires ; retirez le calque pour un fond lumineux de bord à bord. |
Texte (HTML/CSS — .fluid-text) |
1,5rem, gras, blanc, centré | Le bloc accepte plusieurs lignes : donnez-lui une largeur (width: 440px, text-align: center) et composez titre, heure et sous-titre dedans. |
FAQ
transform : le navigateur peint le calque flouté une fois puis le déplace. Mesuré dans Chromium 151 : 120 images par seconde à 1920 × 1080. En revanche, sans carte graphique (Firefox en rendu logiciel), le flou de 40 px sur un calque deux fois plus grand que l'écran fait chuter la cadence. Testez sur les machines visées ; si ça rame, baissez le flou à 24 px ou réduisez le calque (inset: -25%).inset: -50%, il garde une marge d'une demi-largeur de chaque côté, et ses bords ne passent jamais dans le cadre pendant la rotation. En inset: 0, les coins vides apparaîtraient dès qu'il tourne de quelques degrés.
