mask text cutout headline editorial editorial hero headlines launch banners with cutout typography premium section separators headlines need more visual structure want masked typography without SVG authoring need an editorial cutout effect
Text Cutout
Fetch snippet JSON:
curl https://webspire.de/snippets/masks/text-cutout.json Background
Customize
Quick Start
<div class="text-cutout" style="--cutout-mask:url(#headline-mask)"></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 664 bytes · 29 lines
- Custom Properties
-
--cutout-bg--cutout-mask--cutout-duration - Classes
-
.text-cutout
mask text cutout headline editorial
Use this when the type itself should become the visual frame. The effect is especially strong on editorial heroes, splash panels and launch sections.