Blur In
A copy-paste text effects component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Text EffectsHTMLCSSany framework
Blur In
Copy into your project
HTML
<!-- Blur In — text resolves from blur -->
<span class="nuda-blur-in">Blur In</span>CSS
/* ── Blur In ─────────────────────────────────────────────────
Customize:
--nuda-bi-blur : starting blur amount
--nuda-bi-speed : resolve duration
──────────────────────────────────────────────────────────── */
.nuda-blur-in {
--nuda-bi-blur: 14px;
--nuda-bi-speed: 1.1s;
display: inline-block;
font-size: 2rem;
font-weight: 700;
color: #fafafa;
animation: nuda-blur-in var(--nuda-bi-speed)
cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes nuda-blur-in {
from { filter: blur(var(--nuda-bi-blur)); opacity: 0; }
to { filter: blur(0); opacity: 1; }
}
/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.nuda-blur-in {
animation: none;
filter: none;
opacity: 1;
}
}How to use Blur In
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.