Tools you might need next
Generate CSS gradient code. Linear and radial. Copy-paste ready. With preview. Free design tool with instant browser-based results — no account, works on
Generate CSS box-shadow. Offset, blur, spread, color. Visual editor with preview. Free design tool with instant browser-based results — no account, works on
Generate border-radius. Per corner. Visual editor. For rounded corners. Free design tool with instant browser-based results — no account, works on desktop and
mask-image defines a mask layer that controls element visibility. Black areas in the mask are fully visible, transparent areas are hidden. Supports gradients, SVG, and image URLs.
mask-image: [url|gradient]; mask-size: [size]; mask-repeat: [repeat]Masking uses alpha/luminance channels for soft edges and gradients. Clip-path uses hard vector shapes. Use masks for fade effects and complex alpha transparency; clip-path for geometric shapes.
Updated: July 2026
Create a content area that fades to transparent at the bottom using a linear gradient mask.
→ mask-image: linear-gradient(to bottom, black 60%, transparent 100%)
Apply a custom SVG shape as a mask to crop an image into an organic blob shape.
→ mask-image: url(mask.svg); mask-size: contain; mask-repeat: no-repeat
Safari still requires -webkit-mask-image. Always include both the prefixed and unprefixed versions, or use an autoprefixer in your build pipeline.
Masking can cause unexpected results with overflowing content. Set overflow: hidden on masked elements or ensure the mask covers the full content area.
Generate CSS mask-image and clip effects with gradients or URLs. Build fades, cutouts, and shaped reveals for creative overlay and hero section designs. It applies the css masking (mask-image: [url|gradient]; mask-size: [size]; mask-repeat: [repeat]). For example: fade-to-transparent bottom edge — Create a content area that fades to transparent at the bottom using a linear gradient mask.