Animated Blobs
Trois formes organiques pures CSS flottent en douceur grâce à blur(80px) et keyframes désynchronisés — un fond animé zéro 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 entièrement sur CSS : chaque .blob est un <div> rond (border-radius: 50%) auquel un filter: blur(80px) diffuse la couleur bien au-delà de ses dimensions réelles. Cette diffusion gaussienne transforme un simple cercle coloré en forme organique aux contours indéfinis — aucun SVG, aucune librairie.
Deux animations @keyframes distinctes orchestrent le mouvement : blobMove pour blob-1 et blob-2 (positionnés en absolu aux coins du conteneur) applique des translations directes (translate(50px, -50px) au pic) combinées à des variations de scale (0,9–1,1). blobMoveCenter — réservée à blob-3, centré via top: 50%; left: 50% — conserve le décalage translate(-50%, -50%) à chaque keyframe avec des offsets en calc(), pour que la forme reste ancrée autour du centre géométrique même en dérivant.
Les trois blobs tournent sur 20 s avec des délais négatifs décalés : -7 s pour blob-2 (via animation-delay), -14 s pour blob-3 (intégré dans la propriété animation en raccourci). Ils ne se synchronisent jamais, créant une danse continue et naturelle. overflow: hidden sur .bg-blob coupe les débordements — blob-1 (top: -100px; left: -100px) et blob-2 (bottom: -100px; right: -100px) naissent hors du conteneur et émergent progressivement des bords, renforçant l'impression de profondeur.
L'opacity: 0.6 commun aux trois blobs génère une additivité partielle dans les zones de chevauchement : l'indigo (#6366f1), le fuchsia (#d946ef) et le cyan (#06b6d4) se fondent en teintes intermédiaires sans mode de fusion custom. L'effet étant zéro JavaScript, il n'y a ni requestAnimationFrame ni logique de pause — les animations CSS sont pilotées directement par le moteur de composition du navigateur, GPU-accéléré.
Accessibilité
- Pas de prefers-reduced-motion dans le code : le CSS ne contient aucun bloc
@media (prefers-reduced-motion)— les animations tournent en continu même pour les utilisateurs qui ont activé cette préférence OS. À ajouter si l'effet couvre une grande surface ou tourne longtemps :@media (prefers-reduced-motion: reduce) { .blob { animation: none; } }. - Aucun attribut ARIA sur
.bg-blobni ses enfants — si le fond porte un sens visuel important, ajoutezrole="img"etaria-labelau conteneur. - Le
<span class="bg-label">inclus dans le HTML de démo est lu par les lecteurs d'écran tel quel — retirez-le ou ajoutezaria-hidden="true"s'il s'agit d'un label de démo non pertinent pour l'utilisateur final. - Contraste du contenu overlay : les blobs se déplacent en permanence, les zones claires et sombres changent. Si vous placez du texte par-dessus, testez plusieurs configurations et ajoutez un scrim semi-transparent pour garantir WCAG AA (ratio ≥ 4,5:1).
- Navigation au clavier : l'effet est purement décoratif, aucune interaction programmée — compatible avec tout ordre de tabulation, aucun piège de focus.
Compatibilité navigateur
Nécessite CSS animations et filter: blur() — supportés dans tous les navigateurs modernes depuis 2016. Zéro dépendance externe.
Si <code>filter: blur()</code> n'est pas supporté (navigateurs antérieurs à 2016), les blobs s'affichent comme des cercles pleins colorés — l'aspect organique disparaît mais la page reste fonctionnelle et sans erreur JS.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="bg-blob">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<!-- Votre contenu par-dessus -->
</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 |
|---|---|---|
| background dans .blob-1 | #6366f1 | Couleur de la forme principale (indigo, coin haut-gauche). Remplacez par toute valeur CSS valide : hex, hsl, oklch. |
| background dans .blob-2 | #d946ef | Couleur de la forme secondaire (fuchsia, coin bas-droit), animée avec un délai de -7 s. |
| background dans .blob-3 | #06b6d4 | Couleur de la forme centrale (cyan), pilotée par blobMoveCenter pour rester ancrée au centre du conteneur. |
| filter: blur(80px) dans .blob | 80px | Intensité de diffusion. 40–60 px = formes plus nettes, 100–120 px = fondu quasi-total. Plus la valeur est haute, plus le coût GPU est élevé. |
| opacity: .6 dans .blob | 0.6 | Transparence commune à toutes les formes. 0,3 = très discret, 0,8 = couleurs saturées. Détermine aussi l'intensité du mélange de couleurs aux intersections. |
| width/height dans .blob-1/.blob-2/.blob-3 | 300 px / 250 px / 200 px | Taille de chaque forme. Règle pratique : blob ≈ 50–80 % de la plus petite dimension du conteneur. |
| 20s dans animation (les trois blobs) | 20s | Durée d'un cycle complet. 12 s = rapide et nerveux, 30 s = lent et cinématique. Utilisez la même valeur pour les trois blobs pour conserver la cohérence rythmique. |
| background: #0a0a0f dans .bg-blob | #0a0a0f | Couleur du fond. Changez pour un fond clair (ex. #f8fafc) et baissez l'opacité des blobs à 0,3–0,4 pour un rendu pastel. |
FAQ
background: #0a0a0f dans .bg-blob par une couleur claire (ex. #f0f4f8) et baissez l'opacity des blobs à 0,3–0,4. Les couleurs par défaut (#6366f1 indigo, #d946ef fuchsia) donnent de bons résultats sur fond blanc, mais adaptez selon votre palette.<div class="blob blob-4"></div> dans le HTML. Dans le CSS : .blob-4 { width: 220px; height: 220px; background: #f97316; top: 20%; right: -80px; animation-delay: -10s; } — réutilisez l'animation blobMove existante, pas besoin d'une troisième règle keyframe.filter: blur() est accéléré GPU mais coûteux sur de grandes surfaces ou avec de nombreux blobs. Sur mobile bas de gamme, réduisez le blur à 50–60 px et la taille des blobs. Pour respecter les préférences d'accessibilité, ajoutez @media (prefers-reduced-motion: reduce) { .blob { animation: none; } }.
