CSS Mask Generator
Create CSS mask effects with gradients.
Customize direction, position, size, and transparency.
100% = fully visible, 0% = fully transparent/masked
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
How CSS Masks Work
Linear Gradient Masks
Create fade effects that transition in a straight line. Perfect for fading images to transparent at the edges or creating directional reveals.
Radial Gradient Masks
Create circular or elliptical masks that fade from the center outward. Great for spotlight effects, vignettes, or focusing attention on specific areas.
Image Masks
Use PNG or SVG images with transparency as masks. The black areas of the mask image will be visible, while transparent areas will be hidden.
Explore more CSS tools
CSS Grid Generator
Create grid layouts visually
CSS Flexbox Generator
Create flex layouts visually
CSS Gradient Generator
Create custom gradients
CSS Text Gradient
Gradient text effects
CSS Gradients Collection
275+ ready-to-use gradients
CSS Box Shadow Generator
Design multi-layer shadows
CSS Selection Generator
Style text highlight colors
CSS Scrollbar Generator
Style custom scrollbars
CSS Blend Mode Generator
Mix colors with blend modes
CSS Cursor Generator
Preview all cursor styles
CSS Loader Generator
Create loading animations
CSS Button Generator
Design buttons with hover effects
CSS Glow Generator
Create neon glow effects
Fluid Typography
Scale text across screen sizes