Mask reveal
A modern reveal effect with a soft edge. Instead of clipping, animate a CSS mask so the content wipes in like a light beam.
CSS masking
Reveal with a soft edge
Animate mask-position across a wide gradient mask so the edge fades in smoothly—no images, no JS.
Quick implementation
@keyframes reveal {
from { mask-position: 0% 50%; }
to { mask-position: 100% 50%; }
}
.reveal {
mask-image: linear-gradient(90deg, transparent, oklch(0 0 0) 20%, oklch(0 0 0) 80%, transparent);
mask-size: 220% 100%;
mask-repeat: no-repeat;
animation: reveal 1.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
.reveal { animation: none; mask-image: none; }
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer creating a “mask reveal” animation.
Goal: Reveal a card with a soft edge using CSS masks instead of clip-path. Animate the mask so it wipes across the element.
Technical constraints:
- Use mask-image (and -webkit-mask-image) with a linear-gradient that has transparent edges and an opaque middle band.
- Animate mask-position from 0% to 100%.
- Set mask-size larger than 100% (e.g. 200–260%) so the gradient band travels across the element.
- Add prefers-reduced-motion: reduce (disable animation and remove masking).
- Use oklch() for explicit colors in the demo, and site tokens for surfaces.
Framework variant (pick one):
A) Vanilla CSS class .reveal.
B) React component that applies the class when mounted.
Edge cases to handle:
- Browser support differences (use -webkit-mask-*).
- Text selection and focus outlines should remain visible.
- When masking is disabled, content must still be fully readable.
Return HTML + CSS.Why this matters in 2026
Masking gives you the “premium” feel of motion graphics without raster assets. Compared to a hard wipe (clip-path), a gradient mask produces a softer edge that reads as light and depth.
The logic
A mask controls which pixels are visible. By masking with a wide gradient (transparent → opaque → transparent) and moving it across the element, you effectively slide a visibility window. The content doesn’t move—only its visibility changes.
Accessibility & performance
Motion requires a reduced-motion fallback. Masks can also hide focus rings if you clip too aggressively—test keyboard focus. Performance is typically fine for small elements, but don’t apply animated masks to huge full-page surfaces.