Stroke Fill
A copy-paste text effects component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Text EffectsHTMLCSSany framework
Stroke Fill
Copy into your project
HTML
<!-- Stroke Fill — text starts as outline, fills with color -->
<span class="nuda-stroke-fill">Stroke Fill</span>CSS
/* ── Stroke Fill ─────────────────────────────────────────────
Customize:
--nuda-sf-clr : stroke & fill color
--nuda-sf-stroke : stroke width
--nuda-sf-speed : fill duration
──────────────────────────────────────────────────────────── */
.nuda-stroke-fill {
--nuda-sf-clr: #6366f1;
--nuda-sf-stroke: 2px;
--nuda-sf-speed: 2s;
font-size: 2.5rem;
font-weight: 900;
-webkit-text-stroke: var(--nuda-sf-stroke) var(--nuda-sf-clr);
-webkit-text-fill-color: transparent;
animation: nuda-stroke-fill var(--nuda-sf-speed) ease forwards;
}
@keyframes nuda-stroke-fill {
0% { -webkit-text-fill-color: transparent; }
100% { -webkit-text-fill-color: var(--nuda-sf-clr); }
}
/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.nuda-stroke-fill {
animation: none;
-webkit-text-fill-color: var(--nuda-sf-clr);
}
}How to use Stroke Fill
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.