Reveal with Style using CSS Mask Generator
The **CSS Mask Generator** helps you leverage the `mask-image` property. While `clip-path` uses vector shapes (hard edges), masking uses images or gradients (soft edges) to control transparency. It is similar to a Layer Mask in Photoshop.
Masking vs Clipping
Masking determines visibility based on the alpha channel (or luminance) of the mask image. A fully opaque part of the mask shows the element; a transparent part hides it. This allows for soft gradients and complex texture bleeding that clip-path cannot achieve. This tool automates the `linear-gradient` syntax often used for masks.
Key Use Cases
- Fade Outs: Creating a "read more" fade at the bottom of a text block.
- Texture Overlays: Applying a grunge texture to text or buttons using an image mask.
- Soft Edges: Feathering the edges of an image to blend it into the background.
- Vignettes: Creating a circular spotlight effect.
How to Use
- Select the mask type (Linear Gradient or Radial).
- Adjust the 'Stops' to determine where the fade begins and ends.
- Rotate the angle of the mask.
- Copy the CSS code (including webkit prefixes).
Technical & Privacy Note
Local logic. The **CSS Mask Generator** from **Online Tool Base** runs in your browser.