clip-path can cut an element into a shape, but it can’t fade it — the edge is always sharp. CSS masks fill that gap, letting you fade edges smoothly using a gradient, which is exactly what this tool generates.
What Is the CSS Mask Generator?
Pick a mask type — edge fade, radial vignette, or top/bottom/left/right fade — adjust the fade direction and starting point with a live preview, and copy out complete CSS including both the standard mask-image property and the -webkit-mask-image prefix Safari still requires.
How to Use It
- Open the tool at /tools/css-mask-generator.
- Choose a mask type from the dropdown.
- Pick a fade direction (for edge fades) and adjust the “fade starts at” slider.
- Watch the live preview update instantly.
- Copy the generated CSS and apply it to your element.
Key Features
- Four mask presets: single edge fade, radial vignette, and both-edge fades for top/bottom or left/right.
- Live visual preview on a checkerboard background so you can see the transparency clearly.
- Cross-browser CSS output, including the
-webkit-prefix Safari needs. - Adjustable fade start point for precise control over how much of the element stays fully visible.
When to Use This Tool
- Fading a hero image or banner smoothly into the page background.
- Creating a soft vignette effect around a photo or card.
- Cropping content edges gently instead of with a hard
clip-pathcut.
Try It Now
Open CSS Mask Generator directly, or press ⌘K and type the tool name from anywhere on the site.
Part of the CSS Tools collection on WebdevToolbox — free, browser-based developer tools with no login required.