CSS Utility

CSS Mask Generator

Build powerful mask-image effects visually — fades, vignettes, conic sweeps, SVG shapes, and image masks. Preview live and copy the CSS with -webkit-mask fallback included.

Mask type
Preview image

Live preview

Checkerboard shows transparent areas. Picsum images may take a moment to load on first preview.

Notes

  • • Black/opaque pixels in the mask reveal the element; white/transparent pixels hide it.
  • • The output includes both mask and -webkit-mask for Safari.
  • • Apply the CSS to any element with a background, <img>, or solid color.

CSS output

Shorthand for compactness; longhand for editing individual properties.

Shorthand 
.masked {
  -webkit-mask: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%) 0 0 / 100% 100% no-repeat;
  mask: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%) 0 0 / 100% 100% no-repeat;
}
Longhand 
.masked {
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  mask-size: 100% 100%;
  mask-position: 0 0;
  mask-repeat: no-repeat;
}

How to use

Pick a mask type, tweak the sliders, and copy the CSS into any class. Apply it to an element with a background image, an <img>, or a solid color.

Good for

Hero fades, image vignettes, custom-shaped avatars, decorative cards, blurred edges, and scroll-fade effects without Photoshop.

Browser support

mask shorthand is supported in Chrome, Firefox, and Safari (with prefix). The output includes -webkit-mask for older Safari.

About the CSS Mask Generator

The CSS Mask Generator builds mask-image effects visually — fade-outs, vignettes, conic sweeps, SVG cut-out shapes, and image-based masks — and gives you ready-to-paste CSS with the -webkit-mask fallback for Safari. No Photoshop, no SVG editor, no design skills required.

  • Six mask modes: linear fade, radial fade, vignette, conic sweep, SVG shape, and image URL
  • Eight built-in SVG shapes (circle, ellipse, diamond, hexagon, star, heart, blob, rounded square) inlined as data URIs — no external files
  • Live preview against five sample images or your own URL, with a checkerboard background so transparency is obvious
  • Auto-generates both mask and -webkit-mask for Safari compatibility
  • Two output formats: compact shorthand and editable longhand
  • Pure CSS — no JavaScript needed at runtime, no extra requests
  • Runs entirely in your browser — nothing uploaded, nothing logged

How to Use the CSS Mask Generator

  1. 1

    Pick a mask type

    Choose Linear fade for one-sided fade-outs, Radial fade or Vignette for soft centers, Conic sweep for angular reveals, SVG shape to cut into a star or hexagon, or Image URL to use your own black/white mask.

  2. 2

    Tweak the controls

    Adjust angle, opacity stops, position, and size with the sliders. Each mode has just the controls it needs — no clutter.

  3. 3

    Pick a preview image

    Switch between five sample photos, the solid gradient, or paste your own image URL to see how the mask looks against your real content.

  4. 4

    Copy the CSS

    Pick Shorthand for the compact mask: ... line, or Longhand if you want individual mask-image, mask-size, etc.

  5. 5

    Apply it to your element

    Paste the CSS into any class. The element needs visible content — a background-image, an <img> tag, or a solid color — for the mask to do anything visible.

Tip: Black pixels in the mask reveal the element below, white/transparent pixels hide it. If you're using your own mask image, save it as a PNG with transparency for cleanest results.

Common Use Cases

Scroll-Fade Hero Sections

  • • Fade hero images into the next section
  • • Avoid hard edges between blocks
  • • Used by Vercel, Stripe, Apple landing pages

Image Vignettes

  • • Darken portrait corners for focus
  • • Soften product photography edges
  • • Mimic film/lens vignette effect

Custom-Shaped Avatars

  • • Hexagon avatars (gaming/tech sites)
  • • Heart-shaped profile photos
  • • Star or blob shapes for kid/festive themes

Decorative Cards

  • • Torn-paper or fabric-edge cards
  • • Geometric mask overlays for portfolios
  • • Diagonal section dividers

Animated Reveals

  • • Conic-gradient masks for circular wipe transitions
  • • Linear fade animations for hover effects
  • • Scroll-triggered reveal animations

Icon Recoloring

  • • Mask a colored background with a black icon to recolor it
  • • Reuse one icon across multiple themes
  • • Avoid generating multiple PNG color variants

Frequently Asked Questions

What is a CSS mask?

A CSS mask is an image (or gradient) used to partially or fully hide parts of an element. Where the mask is opaque, the element shows; where the mask is transparent, the element is hidden. It's the same idea as a layer mask in Photoshop, but in pure CSS.

What's the difference between mask and -webkit-mask?

mask is the standard CSS property. -webkit-mask is the legacy vendor-prefixed version Safari needed for years. The tool outputs both so the mask works across all current browsers, including older Safari.

Do I need an image to use CSS masks?

Not at all. The most common masks are CSS gradients — linear, radial, or conic. The generator includes those plus inline SVG shape masks (data URIs), which need no external files. Image URLs are just one option of several.

Why doesn't my mask show anything?

Two common reasons: (1) the element you applied it to has no visible content (no background, no image) — masks only hide what's there. (2) The mask image is fully opaque so it hides nothing. Make sure the mask has both opaque and transparent regions, and the target element has something to see.

Can I animate CSS masks?

Yes. mask-position and mask-size are animatable. For gradient masks, you can animate the whole mask-image property too. Conic masks rotating create great circular reveal animations.

What's the difference between mask-image and clip-path?

clip-path uses a vector shape with hard edges — pixels are either inside or outside. mask-image supports partial transparency, so it can produce soft fades, gradients, and feathered edges. Use clip-path for crisp shapes, mask-image for anything blurry or graded.

Are CSS masks supported in all browsers?

Chrome, Edge, Firefox, and Safari all support CSS masks. Safari still needs the -webkit-mask prefix for some properties, which the generator includes automatically. IE 11 is not supported — provide a graceful fallback if that matters for your audience.

How do I use the mask on an <img> tag?

Apply the generated CSS class to the <img> directly: <img src="photo.jpg" class="masked">. The mask hides parts of the image. No extra wrapper or background needed.

Is my data sent to a server?

No. Mask generation runs 100% in your browser. The only outbound requests are to load the optional preview images from picsum.photos — but that's only for preview, never required, and your custom URLs are not transmitted anywhere except your own browser.