Morphing Blob
Forme organique en CSS pur : huit valeurs de border-radius se déforment sur un cycle de 8 secondes avec un dégradé indigo-fuchsia — aucun script requis.
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. Atmosphère comprend 57 effets, dont 10 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose entièrement sur la notation étendue de border-radius : x1 x2 x3 x4 / y1 y2 y3 y4 définit indépendamment les rayons horizontaux et verticaux des quatre coins. Quatre étapes clés (0 %, 25 %, 50 %, 75 %) pilotent la déformation dans @keyframes morphBlob ; le moteur CSS interpole fluidement entre elles sans aucun code impératif.
L'animation utilise ease-in-out sur la propriété animation globale — pas des animation-timing-function par étape — ce qui ralentit naturellement chaque début et fin de cycle et renforce l'impression d'un organisme qui respire plutôt que d'une transition mécanique.
Le remplissage est un linear-gradient(135deg, #6366f1, #d946ef) — indigo vers fuchsia — tracé en diagonale bas-gauche → haut-droit. L'angle de 135° accentue la perception de volume sur la silhouette en perpétuelle déformation : les coins sombres et les coins clairs basculent à chaque morphing.
Il n'y a aucun JavaScript : pas de requestAnimationFrame, pas d'observateur, pas d'état côté script. La boucle d'animation est entièrement déléguée au moteur de rendu du navigateur, ce qui garantit des performances GPU optimales et une intégration transparente dans n'importe quel framework.
Accessibilité
- Pas de
prefers-reduced-motiondans le code source : l'animation tourne en permanence quel que soit le réglage système. Ajouter dans votre CSS :@media (prefers-reduced-motion: reduce) { .morph-blob { animation: none; border-radius: 50%; } } - Le
.morph-blobest un élément purement décoratif, sans texte ni interaction : aucun piège de focus ou de navigation clavier propre à l'effet. - Le HTML fourni n'expose ni
aria-hiddenniaria-label. En usage décoratif, ajouteraria-hidden="true"sur le conteneur parent pour exclure le blob de l'arbre d'accessibilité. - Aucun contraste de texte à vérifier sur le blob seul — la responsabilité du contraste revient au contenu overlay positionné par l'intégrateur.
- Aucun événement natif (clic, focus, clavier) attaché au blob : l'effet est passif, sans risque de piège de navigation.
Compatibilité navigateur
Requiert border-radius avec notation slash et les animations CSS — supportés dans tous les navigateurs modernes depuis 2012.
Si les animations CSS ne sont pas supportées, le <code>div.morph-blob</code> s'affiche comme un rectangle aux coins légèrement arrondis avec le dégradé intact — aucune erreur JS, la page reste lisible.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview" aria-hidden="true">
<!-- Blob décoratif — toute la mécanique est dans le CSS -->
<div class="morph-blob"></div>
<!-- Contenu overlay : positionner en absolu sur .demo-preview (position: relative) -->
</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 (.morph-blob, l. 57) | linear-gradient(135deg, #6366f1, #d946ef) | Couleurs et angle du dégradé. Ex. : linear-gradient(135deg, #0ea5e9, #22d3ee) pour un rendu aquatique, ou une couleur unie #6366f1 pour un blob monochrome. |
| animation-duration (.morph-blob, l. 58) | 8s | Durée d'un cycle complet. 4s = blob nerveux et énergique, 16s = respiration lente et méditative. |
| width / height (.morph-blob, l. 55-56) | 200px | Taille de la forme. Valeurs identiques = blob quasi-carré ; height supérieur = blob ovalisé verticalement. |
| animation-timing-function (.morph-blob, l. 58) | ease-in-out | Courbe de tempo. linear = morphing constant et mécanique, ease-in-out = ralentissement aux extrêmes (organique). |
| border-radius 0%/100% (@keyframes, l. 32) | 60% 40% 30% 70%/60% 30% 70% 40% | Forme de départ et d'arrivée (0 % et 100 % du cycle). Toutes les combinaisons de 0 à 100 % sont valides pour les 8 valeurs. |
| border-radius 50% (@keyframes, l. 40) | 50% 60% 30%/30% 40% 70% 50% | Forme à mi-cycle. Modifier ces valeurs change le point intermédiaire le plus éloigné de la silhouette initiale. |
FAQ
@keyframes morphBlob et appliquée via animation sur .morph-blob. Compatible Angular, React, Vue, Svelte — il suffit d'inclure le CSS et de placer le <div class="morph-blob"></div> dans le DOM.prefers-reduced-motion. Ajoutez dans votre CSS : @media (prefers-reduced-motion: reduce) { .morph-blob { animation: none; border-radius: 50%; } } — le blob devient un cercle statique avec le dégradé intact, visible et propre.filter: hue-rotate() sur .morph-blob avec une seconde @keyframes, ce qui fait tourner les teintes du dégradé sur l'ensemble du spectre sans toucher à la structure de l'effet.
