Browser-onlyNo uploadsAlways free
About Us·Contact

100+ tools · No signup · Always free

CSS Mask Generator

Generate mask-image CSS with live preview. Fade edges, create radial vignettes and spotlight effects — with vendor prefixes and Tailwind output included.

Fade TopFade BottomRadial FadeSpotlightCSS + TailwindVendor Prefixes

How to use

1

Choose a mask preset

Select from Fade Top, Fade Bottom, Fade Left, Fade Right, Radial Fade or Spotlight. Each preset generates a different gradient direction or shape for the mask.

2

Adjust strength and size

Mask Strength controls how transparent the faded end is — 100% is fully transparent, 0% is no effect. Fade Size controls how far the gradient extends across the element.

3

Position the focal point

For Radial Fade and Spotlight presets, use Position X and Y sliders to move the centre of the effect. Toggle Invert to flip which areas are visible and which are masked.

4

Copy and paste the code

Copy the CSS tab for plain CSS with vendor prefixes, the HTML tab for a complete self-contained snippet, or the Tailwind tab for JIT arbitrary value usage in Tailwind projects.

What CSS masking is used for

Scroll fade — read more

Fade the bottom of long text to hint that more content exists below. A linear-gradient mask creates a smooth transition to the background without JavaScript.

Image edge blending

Blend an image seamlessly into a coloured background or another image using a directional fade mask — ideal for hero sections and full-bleed photography.

Spotlight effects

Highlight a focal area — a product, a face, a UI element — by masking the surrounding region with a radial gradient that darkens the edges.

Section transitions

Create smooth visual transitions between stacked page sections without SVG dividers. A fade-bottom mask on the upper section blends into the next section's background.

Text reveal animations

Combine mask-image with CSS animations to reveal text as the mask gradient transitions from fully transparent to fully opaque — no JavaScript required.

Vignette overlays

Apply a radial-gradient mask centred on an image to darken the corners and draw the eye to the middle — a classic photography vignette technique in pure CSS.

How CSS masking works

What is CSS masking?

mask-image applies an image or gradient as a pixel-level visibility mask. The alpha channel controls opacity — black (alpha 1) is fully visible, transparent (alpha 0) is fully hidden. The mask is composited with the element before it is painted to the screen, enabling smooth gradients between visible and hidden states.

Mask vs clip-path

clip-path clips to a hard geometric boundary with no intermediate values — pixels are either fully in or fully out. mask-image uses per-pixel alpha values from a gradient or image, enabling smooth fades. Use clip-path for crisp shapes; use mask-image for gradual transitions, vignettes and artistic blending effects.

Browser support

mask-image with -webkit- prefix is supported in Chrome 4+, Safari 3.1+, Edge 79+ and Opera. The unprefixed mask-image is supported in Firefox 53+ and all modern Chromium browsers (Chrome 120+). Always include both -webkit-mask-image and mask-image. Global support exceeds 97% of browsers in use today.

Performance

CSS masks are applied during the compositing phase — the same GPU-accelerated stage as opacity and transform. Masks do not trigger layout or paint recalculations when animated. For animated masks, add will-change: mask to promote the element to its own compositing layer, ensuring smooth 60fps transitions without jank.

Related tools

CSS Shape Generator

Triangle, arrow, blob, star and hexagon with clip-path and border-radius.

CSS Animation Generator

16 animation presets, keyframe editor, hover and loading effects.

CSS Gradient Generator

Linear, radial and conic gradients with live preview and Tailwind output.

Box Shadow Generator

Multi-layer shadows, neumorphism, glow effects and Tailwind export.

Frequently asked questions

Quick answers about this free online tool.

CSS masking controls the visibility of an element using an image or gradient as a mask. Where the mask is opaque (alpha = 1), the element is fully visible. Where the mask is transparent (alpha = 0), the element is hidden. This is different from clip-path, which uses geometric shapes. The mask-image property accepts gradients, images, and SVG, making it ideal for smooth fades, vignettes, and creative reveals.

clip-path clips an element to a hard geometric boundary — everything inside the shape is fully visible, everything outside is fully hidden. mask-image uses an image or gradient to control visibility per pixel, allowing smooth gradients from fully visible to fully hidden. Use clip-path for crisp polygon shapes (stars, hexagons, arrows). Use mask-image for soft fades, vignettes, spotlight effects, and smooth transitions between visibility states.

Yes — always include both -webkit-mask-image and mask-image. Safari (including iOS Safari) requires the -webkit- prefix, and Chrome/Edge also accept it. Firefox and recent Chrome/Edge support the unprefixed version. This tool generates both automatically. For mask-size, mask-repeat, and mask-position, the same rule applies: always include both -webkit- and unprefixed versions for maximum browser coverage.

mask-image accepts linear-gradient(), radial-gradient(), and conic-gradient() for smooth fades; url() for PNG/SVG mask images (alpha channel controls visibility); and none to remove a mask. Gradients use the alpha channel — black (rgba(0,0,0,1)) shows the element, transparent (rgba(0,0,0,0)) hides it. You can combine multiple masks using a comma-separated list, similar to multiple background layers.

Apply a linear-gradient mask from black (visible) to transparent (hidden) in the direction of the fade. For a bottom fade: -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%); mask-image: linear-gradient(to bottom, black 50%, transparent 100%); -webkit-mask-size: 100% 100%; mask-size: 100% 100%;. The 50% stop controls where the fade begins, and 100% is where the content is fully hidden.

Yes — multiple masks can be stacked using a comma-separated list, just like background-image layers. mask-image: linear-gradient(to bottom, black 0%, transparent 100%), radial-gradient(circle at center, black 30%, transparent 80%). Each mask layer is composited using the mask-composite property (add, subtract, intersect, or exclude). This enables complex masking effects like combining a linear fade with a radial spotlight.

No — mask-image only affects the painted output, not the layout. The masked element still occupies its full box model space (width, height, margin, padding) even if parts of it are visually hidden. This is the same behaviour as opacity and clip-path. Pointer events on masked-out areas still fire unless you also add pointer-events: none. Use this to your advantage when building scroll-fade effects that don't shift layout.

mask-mode controls whether the mask uses the luminance or the alpha channel of the mask image. The default is match-source, which uses alpha for raster images and SVG masks with explicit masking, and luminance for SVG <mask> elements. Set mask-mode: alpha to force alpha-channel masking (the behaviour this tool uses). Set mask-mode: luminance when you want bright areas of an image to show content and dark areas to hide it — useful when masking with black-and-white photos.