CSS Button Generator
About CSS Mask Generator
The CSS Mask & SVG Alpha Transparency Generator creates gradient fades, image cutout masks, and radial vignette masks using modern `mask-image` and `-webkit-mask-image` properties with custom blend modes and repeat settings.
How to Use CSS Mask Generator
Step 1
Select mask type (Linear Gradient, Radial, or Custom SVG).
Step 2
Adjust mask gradient stops or upload an SVG mask graphic.
Step 3
Inspect the live image masking transparency preview.
Step 4
Click "Copy CSS".
Practical Use Cases for CSS Mask Generator
Smooth Gradient Image Fades to Background
Fade the bottom or side edges of hero images seamlessly into dark website backgrounds without modifying the source image.
Custom SVG Cutout Masking
Mask video backgrounds or text banners with custom SVG logo silhouettes and stencil patterns.
Input & Output Examples
Generating Bottom Gradient Fade Mask
Type: Linear Gradient, Direction: To Bottom, Stops: [black 60%, transparent 100%]
-webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);\nmask-image: linear-gradient(to bottom, black 60%, transparent 100%);
Key Features & Performance
- ✓Mask types: Linear Gradient Fade, Radial Vignette Mask, SVG Vector Silhouette, and Repeating Pattern Masks.
- ✓Includes standard `mask-image` and `-webkit-mask-image` prefixes for full cross-browser support.
- ✓Controls for Mask Size, Position, Repeat, and Alpha / Luminance mask modes.
- ✓100% Client-Side generation.
- ✓1-Click Copy CSS mask rules.
Key Terminology & Definitions
CSS `mask-image`
A CSS property using an image or gradient as a luminance/alpha mask, determining which parts of an element are opaque or transparent.
Alpha Masking vs Luminance Masking
Alpha masking uses the transparency channel of the mask image; luminance masking uses pixel brightness to determine opacity.