stroke reveal outline fill text animation property hero headline reveal animation creative text entrance effect editorial typography accent text appears too abruptly want outline-to-fill text animation need creative text reveal without JS
Text Stroke Reveal
Fetch snippet JSON:
curl https://webspire.de/snippets/text/text-stroke-reveal.json
Stroke to fill
Webspire
Useful for dramatic wordmarks and title cards where the outline should resolve into a solid word.
Background
Customize
Quick Start
<h1 class="text-stroke-reveal text-6xl font-bold">Reveal</h1>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 554 bytes · 27 lines
- Custom Properties
-
--stroke-color--stroke-width--stroke-speed - Classes
-
.text-stroke-reveal
stroke reveal outline fill text animation property
Text starts as a transparent outline (via -webkit-text-stroke) and smoothly fills with color using @property to animate the fill opacity. Plays once on load.
Hero headline reveal
<h1 class="text-stroke-reveal text-7xl font-black" style="--stroke-speed: 1.5s">
Webspire
</h1>