CSS Mask Generator
Generate CSS mask declarations for fade-out edges, scroll fades, shaped reveals and gradient wipes, with the prefixed fallback and an explanation of why opacity is not a substitute.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
A mask is transparency driven by an image
Where opacity fades an entire element uniformly, a mask varies transparency across it according to a second image. The mask's alpha channel becomes the element's transparency, so a black-to-transparent gradient produces an element that fades out. This is what makes a scrolling list fade at its top and bottom edges, and it works over any background, which is the crucial difference from the old technique of overlaying a gradient in the background colour.
The overlay approach breaks on anything but a flat colour
Before masks, an edge fade was faked by stacking a gradient from the background colour to transparent on top of the content. It works exactly as long as the background is that one flat colour: over a photograph, a gradient, a patterned surface, or in a theme where the background changes, the fake fade becomes a visible smear of the wrong colour. A mask removes the pixels rather than painting over them, so it is correct on any background.
Only the alpha matters, and the colour choice is arbitrary
In the default alpha mode, the mask's transparency is what is read and its colour is ignored entirely, which is why the gradients here run from black to transparent: black is conventional and red would work identically. Setting mask-mode to luminance instead reads brightness, so white shows and black hides. Mixing the two mental models is the usual reason a mask appears inverted.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
What is the difference between a mask and opacity?
Opacity fades the entire element uniformly. A mask varies transparency across it according to a second image, so parts can be fully visible while others fade out completely.
Why not overlay a gradient in the background colour?
Because it only works over that exact flat colour. Over a photograph, a gradient, a pattern or in a different theme, the fake fade becomes a visible smear of the wrong colour. A mask removes pixels rather than painting over them.
Why is my mask inverted?
Usually a confusion between the two modes. The default alpha mode reads the mask transparency and ignores its colour; luminance mode reads brightness, where white shows and black hides. Mixing the two produces exactly the opposite of what you expect.
Do I still need the webkit prefix?
It costs one line and covers older Safari, so it is worth including. The unprefixed property works in every current browser, and declaring both is the usual practice.
Can a mask use an image or SVG?
Yes. Any image works, including an SVG, and only its alpha channel is read in the default mode. That is how a shaped reveal or a textured edge is produced without changing the element geometry.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Choose a mask type and edges to generate the CSS mask declaration.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.