CSS Mask Generator — Fade Edges, Vignettes & Patterns

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.

Auch gesucht als: 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.

Passende Tools zu: 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.