Comment utiliser : CSS Mask Generator
- Choose an effect: fade one edge, top and bottom, all edges, a vignette, a spotlight or stripes.
- Adjust the fade size, direction, position or stripe width with the sliders.
- Try it on your own picture with Use my image.
- Copy the CSS — it includes
-webkit-mask-image, which Chrome, Edge and Safari still need for some properties.
How CSS masks work
mask-image uses an image or gradient as a stencil: where the mask is opaque the element shows, where it is transparent the element disappears, and in between it fades. Gradients make the most useful masks because they need no extra files:
.hero {
-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
mask-image: linear-gradient(to bottom, #000 70%, transparent);
}- Fading all edges needs two gradients combined with
mask-composite: intersect(and-webkit-mask-composite: source-in), which the generator adds for you. - Masks don’t change layout or hit-testing — the faded area is still clickable.
- Unlike
opacity, a mask can fade only part of an element; unlike an overlay gradient, it shows the real background behind.
Shape masks vs. clip-path
The Shape effect turns a clip-path shape into an inline SVG used as mask-image. The result looks like clip-path but the edge can be feathered, and the shape can be scaled with mask-size and repeated with mask-repeat.
To cut hard shapes instead of fading, use the Clip-path Generator. For color effects, the CSS Filter Generator.
Aussi recherché comme : mask-image generator, css fade image edges, css gradient mask, fade out image css, css vignette, mask image linear gradient, webkit mask image, css fade edges.
Outils complémentaires : CSS Mask Generator
- CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
- SVG Wave Generator — Design wavy section dividers for landing pages: add or remove waves (up to 6, each with its own color, opacity and shape), set the number of crests, height and smoothness, choose colors and whether the wave sits at the top or bottom.
- Border Radius Generator — Round the corners of any box: drag one slider for all corners or set each corner separately, switch to elliptical corners for blob and leaf shapes, and copy the shortest valid border-radius CSS.
- Glassmorphism Generator — Design a frosted-glass card with live sliders and copy cross-browser CSS — with the -webkit-backdrop-filter prefix and a fallback for older browsers.
Questions fréquentes
How do I fade the edges of an image with CSS?
Apply a gradient mask: mask-image: linear-gradient(to bottom, #000 70%, transparent) fades the bottom. To fade all edges, combine a horizontal and a vertical gradient with mask-composite: intersect — choose “Fade all edges” here.
Do I still need -webkit-mask-image?
Yes, for best support. Chromium-based browsers and Safari still rely on the -webkit- versions of some mask properties, so the generator outputs both.
What is the difference between mask-image and clip-path?
clip-path cuts a hard-edged shape; mask-image can fade gradually using a gradient or image as the stencil.
How do I give a clip-path shape soft edges?
clip-path always cuts hard edges. Choose the Shape effect here: the same shapes become an SVG mask, and the Feather slider blurs its edge so the image fades out smoothly.
Can I use an image or SVG as a mask?
Yes — choose “My image or SVG as the mask” and upload a PNG with transparency or an SVG. Its opaque parts show the element and its transparent parts hide it; set the mask size, repeat and position, then copy the CSS and point url() at your file.
Puis-je installer CSS Mask Generator en tant qu’application web et l’utiliser hors ligne ?
Oui. CSS Mask Generator est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.