OneTaskBy Tim King · Updated
Gradient Mask Generator
Linear or Radial Transparency Masks for Images and Elements, Copied as CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Gradient Mask Generator works
This gradient mask generator writes the CSS to fade an image or element smoothly to transparent,
either in one direction or outwards from the centre. Choose the mask type, the direction and where
the fade starts and ends, then copy the mask-image code.
Masks are the clean way to blend a photo into the page, fade the edge of a scrolling list or soften a hero image, because they change transparency rather than painting a colour over the top.
How the gradient mask works
A mask uses the alpha of an image to decide how much of the element shows. Opaque parts of the
gradient keep the element visible and transparent parts hide it. The generator writes a gradient
from solid black to transparent between your start and end points, plus the -webkit- version for
Safari.
Linear or radial
A linear mask fades along one direction, which suits a hero image melting into the page below it. A radial mask fades from the middle outwards, giving a soft vignette that frames a portrait.
FAQ
Why use a mask instead of a gradient overlay?
An overlay paints a colour on top, so it only blends if it matches the background exactly. A mask makes the element itself transparent, so it fades into any background, pattern or image behind it.
Does mask-image work in Safari?
Yes, but Safari still needs the -webkit-mask-image property for some cases, so the generated code includes both. All current versions of Chrome, Edge, Firefox and Safari support gradient masks.
Can I fade the edges of a scrolling list?
Yes. Use a linear mask with transparent ends, such as a gradient that is transparent at 0 and 100 percent and solid in between, and items fade softly as they scroll in and out.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Clip-Path Generator
Build clip-path shapes — polygons, stars, circles, chevrons — visually.
Image Filter Sandbox
Slide eight filter functions and copy the CSS declaration.
Gradient Maker
Linear, radial and conic CSS gradients with live preview.
Image Reveal On Scroll
Wipe or circle an image into view as it scrolls onto the screen.
CSS Wave Generator
Wavy section edges from an inline SVG path, copied as CSS.