CSS Mask: Cutouts, Fades and Text Without Editing Images

Use `mask-image`, gradients and SVG to create visual cutouts, fades and focus effects without modifying the original asset.

How much do you know about CSS?

📘 Theory

What a mask really does

It does not modify the asset. It modifies visibility.

A mask acts as an intermediate layer between the original content and the final rendering. Opaque areas remain visible, while transparent areas disappear.

That makes masks useful whenever you want to direct attention, soften the edge of a surface or reveal only one meaningful area of a block.

It works on images, backgrounds and full blocks.
You can generate it with gradients, inline SVG or external mask assets.
It scales better than exporting separate raster versions for every visual variant.

Gradients as masks: fade, spotlight and stripes

The most practical entry point starts with `linear-gradient()` and `radial-gradient()`.

A `linear-gradient()` mask is ideal for vertical or horizontal fades. A `radial-gradient()` mask works better for spotlight effects, circular reveals or attention zones.

When you need more control, you can combine layers and tune them with `mask-size`, `mask-position` and `mask-repeat`.

Masks with SVG and text

When gradients are not enough, SVG gives you more precise control over the shape.

SVG is especially helpful for giant letters, irregular geometry or brand-driven cutouts. Instead of exporting many raster variants, you can keep the content live and change only the mask.

This approach works well in editorial heroes, course covers and promotional blocks where you want stronger visual personality without losing flexibility.

Large text as a mask for editorial headlines.
Organic or geometric shapes with more precision than a gradient alone.
Strong pairing with hover and scroll-based animation work.

Compatibility and graceful fallback

The effect is useful, but it should never make the interface brittle.

In WebKit-based browsers, it is still common to declare both `mask-*` and `-webkit-mask-*`. If the cutout is decorative, a fallback can simply show the full content with no masking at all.

If the effect matters to comprehension, wrap it in `@supports` or degrade it to a simpler version with rounded corners, an overlay or `clip-path`.

Animating clip-path with intent

1 What a mask really does 2 Gradients as masks: fade, spotlight and stripes 3 Masks with SVG and text 4 Compatibility and graceful fallback 5 Animating clip-path with intent

🧭 Key visuals

How a CSS mask works

It explains the mental model behind `mask`: base content, visibility layer and final cutout result.

Diagram showing original content, mask layer and final rendered result after applying CSS mask.

🧪 Learn by doing

Example Interactive demo: visual CSS mask generator Explore fades, spotlight effects, stripes and text-based reveals to understand how `mask-image`, `mask-size` and `mask-position` behave in real time.

⌄

Example Guided demo: card with a bottom fade Apply a linear mask to soften the lower edge of an image and leave breathing room for the content.

⌄