Blob Mask
Un bloc découpé en forme de galet organique par un masque SVG, qui se resserre et revient en douceur : dégradé, photo ou chiffre à l'intérieur.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. SVG comprend 30 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le bloc .blm-blob est un carré (220 px par défaut, aspect-ratio:1) rempli d'un dégradé cyan → bleu → indigo. Son mask-image est une forme de blob dessinée en SVG et écrite directement dans le CSS (data URI) : seules les zones couvertes par la forme restent visibles. Le masque est centré, sans répétition, et prend toute la largeur du carré : la silhouette entière se voit, bords arrondis et creux compris.
L'animation blmBreathe fait passer la taille du masque de 100 % à 86 % puis la ramène, en 4 s (ease-in-out, en boucle). La forme se resserre vers son centre et revient, comme une respiration ; le contenu, lui, ne bouge pas. Amplitude et durée se règlent avec --blm-min, --blm-max et --blm-speed.
Tout ce qui est dans le bloc est découpé avec lui : le mot « BLOB » centré, ou une <img> qui remplit le carré (object-fit:cover). CSS seul, aucun JavaScript ; chaque déclaration de masque est doublée de sa version -webkit-.
Accessibilité
- Mouvement réduit : avec
prefers-reduced-motion: reduce, l'animation est retirée ; le blob reste à pleine taille, immobile. - Mouvement lent : un cycle dure 4 s et la forme ne varie que de 14 % : pas de clignotement ni de saut.
- Contenu : le texte est un vrai
<span>et une image garde sonalt. Les bords du blob rognent une partie de l'image : cadrez le sujet au centre. - Pointeur : le blob est décoratif et ne réagit pas au clic et garde le curseur normal.
Compatibilité navigateur
mask-image SVG en data URI, mask-size animé (avec les versions -webkit- pour Chrome et Edge avant 120 et Safari avant 15.4), variables CSS dans @keyframes, aspect-ratio, inset. Mesuré dans Chromium, Firefox et WebKit (Playwright) : forme visible (retirer le masque change 8 à 10 % de l'image), respiration, deux copies, arrêt en mouvement réduit, 390 px.
Sans masque, le carré s'affiche entier, sans découpe. Sans aspect-ratio, donnez au bloc une hauteur égale à --blm-size.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0627-root">
<div class="blm-blob">
<span class="blm-label">BLOB</span>
</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 |
|---|---|---|
Taille (CSS — --blm-size) |
220px | Côté du carré ; la forme suit. 100% pour remplir un parent. |
Remplissage (CSS — --blm-fill) |
linear-gradient(135deg, #06b6d4, #3b82f6, #6366f1) | Toute valeur de background. Une <img> placée dans le bloc le couvre. |
Respiration (CSS — --blm-min, --blm-max) |
86% / 100% | Tailles extrêmes du masque. Restez à 100 % ou moins pour --blm-max : au-delà, la forme sort du carré et se fait rogner. |
Durée d'un cycle (CSS — --blm-speed) |
4s | 6 à 8 s pour un fond calme, 3 s pour une pastille plus présente. |
Fond et hauteur du bloc (CSS — --blm-page, --blm-height) |
#0a0a0f / 300px | transparent et 0px pour poser le blob dans votre mise en page. |
Forme (CSS — l'attribut d du chemin dans l'URL du masque) |
galet à 10 courbes | Remplacez le chemin par un autre blob (générateur de blobs, Figma, Inkscape) dans un viewBox de 200 × 200 ; pensez à le changer dans mask-image et -webkit-mask-image. |
FAQ
mask-size de 100 % au plus). Sur un bloc carré, la silhouette entière se voit pendant toute la respiration. Sur un bloc plus large que haut, le masque garderait ses proportions et la forme serait coupée en haut et en bas : gardez aspect-ratio:1 et réglez seulement --blm-size.<span class="blm-label"> par <img src="portrait.jpg" alt="…"> : l'image couvre le carré puis le masque la découpe. Un portrait cadré serré, visage au centre, donne le meilleur résultat.mask-image ne se transforme pas d'une forme à l'autre. Pour une forme qui se déforme, il faut animer le chemin d'un SVG (voir l'effet Morphing Shape de la même catégorie) ou un border-radius à huit valeurs.
