Gradient Mask Fade
Un bloc dont le centre reste net et dont les bords s'effacent dans la page, grâce à un masque radial : quadrillage, image ou interface, sans animation.
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 .gmf-fade (280 × 180 px par défaut) porte un mask-image en dégradé radial : une ellipse de 80 % × 60 % de la boîte, opaque jusqu'à 40 % de son rayon puis de plus en plus transparente jusqu'à 70 %. Là où le masque est opaque, le contenu s'affiche ; là où il est transparent, on voit ce qu'il y a derrière. Le bloc n'a donc pas de bord : il se fond dans la page, quelle que soit sa couleur.
Le contenu est libre. Par défaut, un quadrillage indigo sur fond presque noir (un petit SVG en data URI, répété) avec le mot « FADE » au centre. Remplacez le fond par --gmf-fill, ou placez une <img> dans le bloc : elle le remplit (object-fit:cover). N'importe quel HTML posé dedans est fondu de la même façon, une maquette d'interface comprise.
L'effet est statique : aucune animation, aucune réaction au pointeur, aucun JavaScript. La forme du fondu se règle avec quatre variables (--gmf-rx, --gmf-ry, --gmf-solid, --gmf-end), écrites une seule fois et reprises par mask-image et sa version -webkit-mask-image.
Accessibilité
- Rien qui bouge : aucune animation ni clignotement, le réglage de mouvement réduit n'a rien à arrêter.
- Texte réel : le libellé est un vrai
<span>. Gardez les textes importants dans la zone nette : sur les bords, ils perdent leur contraste. - Images : une capture ou une carte placée dans le bloc garde son
alt. Si l'image ne fait qu'illustrer un texte voisin, laissezalt="". - Pointeur : le bloc ne réagit à rien et garde le curseur normal : il ne promet pas de clic.
Compatibilité navigateur
mask-image en dégradé radial, avec -webkit-mask-image pour Chrome et Edge avant 120 et Safari avant 15.4 ; variables CSS dans le dégradé. Mesuré dans Chromium, Firefox et WebKit (Playwright) : bords effacés (retirer le masque change 1,6 % de l'image de la démo), deux copies, 390 px, fond blanc et fond sombre.
Sans masque, le bloc s'affiche entier, avec des bords nets : rien ne disparaît.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0624-root">
<div class="gmf-fade">
<span class="gmf-label">FADE</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 — --gmf-width, --gmf-height) |
280px / 180px | 100% pour suivre un parent qui a une hauteur, par exemple en fond de section. |
Contenu (CSS — --gmf-fill) |
quadrillage indigo sur #111 | Toute valeur de background. Ou une <img> dans le bloc, qui le couvre. |
Largeur et hauteur de l'ellipse (CSS — --gmf-rx, --gmf-ry) |
80% / 60% | Rayons de la zone de fondu, en pourcentage de la boîte. Deux valeurs égales sur un bloc carré donnent un cercle. |
Zone nette (CSS — --gmf-solid) |
40% | Jusqu'où, depuis le centre, le contenu reste entièrement visible. |
Fin du fondu (CSS — --gmf-end) |
70% | Point où tout est transparent. Plus l'écart avec --gmf-solid est grand, plus le fondu est doux. |
Fond et hauteur du bloc (CSS — --gmf-page, --gmf-min-h) |
#0a0a0f / 300px | transparent et 0px : le bloc se fond alors directement dans votre page. |
FAQ
--gmf-solid ou --gmf-end dans votre propre CSS : il faut alors déclarer ces variables avec @property (type <percentage>) pour qu'elles s'interpolent.<span class="gmf-label"> par <img src="capture.png" alt="…"> : elle couvre le bloc. Réglez --gmf-width et --gmf-height aux proportions de l'image, et resserrez --gmf-solid si vous voulez qu'une seule zone de l'écran reste nette.
