Generator Tools

CSS Mask Image Generator

Build CSS mask-image with a live preview. SVG shapes, linear and radial gradients, or image URLs with mask-size, position, repeat, and mode.

Quick presets

Live preview

Background

Subject

Subject image URL

Any image URL works. The mask shape will cut the image to the selected silhouette. Try your own photo or asset URL.

Mask source

Shape

Shapes render as inline SVG inside a data URI, so the result is portable and works with no external file.

Mask controls

Size

cover fills the box and may crop; contain fits inside; custom accepts pixels, percentages, or two-value pairs like 50% 100%.

Position

Repeat

Mode

alpha uses transparency: clear pixels hide. luminance uses brightness: white reveals, black hides. match-source picks based on the mask format.

Preview widthPreview height

CSS rule (cross-browser)

Includes both -webkit-mask-* and standard properties for Safari and modern browsers.

.masked {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='%23000000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='%23000000'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: alpha;
}

Mask shorthand

Single-line shorthand: image, position, size, repeat. Add manually if you need a vendor prefix.

mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='%23000000'/%3E%3C/svg%3E") center / contain no-repeat; mask-mode: alpha;

Tailwind v3+ arbitrary classes

Spaces inside the value are replaced with underscores per Tailwind's arbitrary-value syntax.

[mask-image:url("data:image/svg+xml;utf8,%3Csvg_xmlns='http://www.w3.org/2000/svg'_viewBox='0_0_100_100'%3E%3Ccircle_cx='50'_cy='50'_r='48'_fill='%23000000'/%3E%3C/svg%3E")] [mask-size:contain] [mask-position:center] [mask-repeat:no-repeat] [mask-mode:alpha]

Copy-ready summary

Cross-browser rule, shorthand, and Tailwind classes in one block.

CSS Mask Image Generator

CSS rule (cross-browser)
  .masked {
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='%23000000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='%23000000'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-mode: alpha;
  }

Mask shorthand
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='%23000000'/%3E%3C/svg%3E") center / contain no-repeat; mask-mode: alpha;

Tailwind v3+ arbitrary classes
  [mask-image:url("data:image/svg+xml;utf8,%3Csvg_xmlns='http://www.w3.org/2000/svg'_viewBox='0_0_100_100'%3E%3Ccircle_cx='50'_cy='50'_r='48'_fill='%23000000'/%3E%3C/svg%3E")] [mask-size:contain] [mask-position:center] [mask-repeat:no-repeat] [mask-mode:alpha]

mask-image, at a glance

Opaque reveals. Inside the mask, opaque pixels keep content visible; transparent pixels hide it. The visible content is what the mask covers, not what it cuts away.
Vendor prefix matters. Safari and several mobile browsers still want -webkit-mask-*. The output above ships both forms.
SVG masks travel as data URIs. The shape mode embeds the SVG so the result is a self-contained CSS value, no asset hosting needed.
Alpha vs luminance. Alpha drives the mask off transparency. Luminance drives it off brightness. PNGs without alpha need luminance; SVGs and gradients usually work in either mode.
Mask differs from clip-path. clip-path uses a geometric path and is binary. mask-image supports soft edges and gradients, so it is the right tool for fades and feathered cutouts.
Local only. The preview, CSS output, and Tailwind classes are computed in your browser. Nothing you type or load is uploaded.

How to use

Pick a preset to start (Spotlight, Circle cutout, or Fade bottom are common starting points) or click Reset to begin from defaults.
Choose a mask source: built-in SVG shape, linear gradient, radial gradient, or an image URL.
Adjust mask-size, mask-position, mask-repeat, and mask-mode to match your layout. Switch the preview subject between Image, Color, and Gradient to see how the mask reads.
Use the Background buttons to verify contrast against dark, light, and checker surfaces.
Copy the full CSS rule (which ships both -webkit-mask-* and standard properties), the shorthand, or the Tailwind class block, depending on your stack.

About this tool

CSS Mask Image Generator builds the `mask-image` property and the related `mask-size`, `mask-position`, `mask-repeat`, and `mask-mode` longhands from four mask sources: built-in SVG shapes (circle, ellipse, ring, star, hexagon, wave, blob, heart, diamond), linear gradients, radial gradients, and external image URLs. The shape mode embeds the SVG as an inline data URI, so the result is a self-contained CSS value with no external file required. The gradient modes let you fade edges, build vignette effects, paint spotlights, and reveal content progressively. The URL mode accepts any image, with mask-mode set to alpha (transparent pixels hide) or luminance (white reveals, black hides). The output ships both the unprefixed properties and the `-webkit-mask-*` longhands together, because Safari and several mobile Chromium versions still require the prefix for production-safe results. A live preview shows the mask applied to an image, a flat color, or a gradient subject, on a dark, light, or checker background, so you can verify the cutout reads correctly against the surface where your component will ship. Eight presets cover the most common patterns: fade bottom, spotlight, circle cutout, star badge, ring frame, wave edge, vignette, and diagonal fade. Mask controls include cover, contain, auto, or a custom size string, named positions plus a custom position field, six repeat modes (no-repeat, repeat, repeat-x, repeat-y, space, round), and the three mask-mode values. Output formats include the full cross-browser CSS rule, a single-line mask shorthand, a Tailwind v3+ arbitrary-value class block (using the `[mask-image:...]` bracket syntax with underscores for spaces), and a copy-ready summary block. The tool also explains how mask-image differs from clip-path: clip-path uses a binary geometric path, while mask-image supports soft edges and gradients, which is why mask-image is the right tool for fades, feathered cutouts, and luminance-driven reveals. Useful for designers and developers building hero sections, image cutouts, decorative card edges, glass-morphism backdrops, badge masks, and any treatment that needs a non-rectangular reveal without rasterizing the asset. The preview, CSS generation, and Tailwind class output all run locally in your browser. Nothing you type or load is uploaded.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS Mask Image Generator

How to use

About this tool

You may also like

CSS Clip Path Generator

CSS Gradient Generator

CSS Filter Generator

CSS Box Shadow Generator

CSS Outline Generator

SVG Blob Generator