Blur Reveal
A copy-paste text effects component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Text EffectsHTMLCSSany framework
Blur Reveal
Copy into your project
HTML
<!-- Blur Reveal — text un-blurs into view -->
<span class="nuda-blur-reveal">Blur Reveal</span>CSS
/* ── Blur Reveal ─────────────────────────────────────────────
Customize:
--nuda-br-blur : initial blur amount
--nuda-br-speed : reveal duration
--nuda-br-offset : initial vertical offset
──────────────────────────────────────────────────────────── */
.nuda-blur-reveal {
--nuda-br-blur: 16px;
--nuda-br-speed: 1.2s;
--nuda-br-offset: 8px;
display: inline-block;
font-size: 2rem;
font-weight: 700;
animation: nuda-blur-reveal var(--nuda-br-speed) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes nuda-blur-reveal {
from {
filter: blur(var(--nuda-br-blur));
opacity: 0;
transform: translateY(var(--nuda-br-offset));
}
to {
filter: blur(0);
opacity: 1;
transform: translateY(0);
}
}
/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.nuda-blur-reveal {
animation: none;
filter: none;
opacity: 1;
}
}How to use Blur Reveal
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.