Floating Shapes
Trois orbes colorées à blur 60 px dérivent en décalage de phase sur fond sombre — atmosphère ambiante 100 % CSS, aucun 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 trois <div> positionnés en absolu dans .bg-floating-shapes, mis en forme comme des disques par border-radius: 50%. Tout est CSS pur : l'animation @keyframes floatShapes de 20 secondes enchaîne quatre positions clés qui combinent des translations diagonales (±50 px) et une rotation complète (0° → 270°), avec une courbe ease-in-out qui adoucit chaque inversion de direction.
L'identité visuelle repose sur deux propriétés combinées : filter: blur(60px) transforme chaque disque de couleur unie en un halo diffus aux bords insaisissables ; opacity: 0.5 rend les halos semi-transparents, si bien qu'aux intersections l'indigo (#6366f1), le rose (#d946ef) et le cyan (#06b6d4) se composent optiquement — la couleur mixte émerge naturellement sans calque supplémentaire ni dégradé complexe.
Les trois formes partagent la même animation mais portent des délais négatifs distincts (0 s, −5 s, −10 s). Un délai négatif fait démarrer l'animation à un instant déjà avancé du cycle : les trois orbes sont toujours à des positions différentes, leur chevauchement changeant en continu de façon organique, sans jamais se synchroniser visiblement.
Le conteneur a overflow: hidden — les formes sont volontairement surdimensionnées et positionnées en partie hors des bords (top: −100 px, right: −150 px…) pour que le halo couvre les coins sans zones vides. Le contenu overlay (texte, boutons) se pose par-dessus via le flux normal ou position: absolute; z-index: 1.
Accessibilité
- prefers-reduced-motion absent : le code source ne gère pas cette préférence OS — l'animation tourne toujours. Ajoutez manuellement
@media (prefers-reduced-motion: reduce) { .shape { animation: none; } }si votre projet le requiert. - Les formes sont purement décoratives : ajoutez
aria-hidden="true"sur le conteneur.bg-floating-shapespour le masquer aux lecteurs d'écran. - Aucune interaction clavier ni JavaScript : le composant est passif, pas de piège au focus, aucun événement à gérer.
- Le texte overlay doit assurer un contraste WCAG AA (ratio ≥ 4,5:1) sur le fond sombre — vérifiez le ratio si vous modifiez l'opacité ou les couleurs des formes.
- Pas de canvas : aucun attribut
roleniaria-labeln'est nécessaire sur les formes elles-mêmes.
Compatibilité navigateur
Nécessite filter: blur() et CSS Animations — supportés dans tous les navigateurs modernes depuis 2020.
Si <code>filter</code> n'est pas supporté (IE 11), les formes s'affichent comme des disques de couleur unie sans flou — le fond reste coloré, la page reste fonctionnelle, aucune erreur JS.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="bg-floating-shapes">
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="shape shape-3"></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 |
|---|---|---|
| background sur .shape-1 / .shape-2 / .shape-3 | #6366f1 / #d946ef / #06b6d4 | Couleurs des trois orbes — remplacez par votre palette brand. Chaque forme accepte n'importe quelle valeur CSS valide (hex, hsl, gradient). |
| width / height sur .shape-1 / .shape-2 / .shape-3 | 300 px / 400 px / 250 px | Taille des orbes. Formes plus grandes = couverture plus large ; réduisez à 150–200 px pour un fond fin et discret. |
| filter: blur(…) sur .shape | 60px | Rayon de flou de toutes les orbes. 40 px = bords légèrement définis, 80 px+ = halos très fondus et atmosphériques. |
| opacity sur .shape | 0.5 | Intensité des halos. 0.3 = fond très discret, 0.7 = couleurs saturées — affecte aussi l'intensité du mélange optique aux intersections. |
| animation-duration sur .shape | 20s | Durée d'un cycle complet. 12 s = déplacement dynamique et perceptible, 30 s+ = dérive presque imperceptible, plus cinématique. |
| translate(50px, -50px) dans @keyframes floatShapes | 50 px / −50 px | Amplitude du déplacement à chaque étape clé. ±20 px = fond presque fixe, ±80 px = mouvement très marqué. |
| background sur .bg-floating-shapes | #0a0a0f | Couleur du fond derrière les orbes — remplacez par la couleur de votre section pour intégrer l'effet dans n'importe quel thème. |
FAQ
div, une règle @keyframes et des propriétés filter, opacity, animation. Aucun fichier JS n'est nécessaire. Copiez le HTML et le CSS dans un projet React, Vue, Angular ou tout autre framework — ça fonctionne sans configuration supplémentaire..shape dans le HTML, attribuez-lui un nom unique (ex. .shape-4), définissez son background, sa taille et sa position dans le CSS, puis ajoutez un animation-delay négatif différent des trois existants (ex. -15s pour une phase à 75 % du cycle). La nouvelle forme hérite automatiquement de l'animation floatShapes.transform et filter au GPU via son compositeur — les trois éléments sont promus sur leur propre couche de rendu, le CPU reste quasiment inactif. Sur un mobile d'entrée de gamme, réduisez le flou à 40px et l'opacité à 0.3 pour alléger la charge de composition.
