Blur Reveal
A copy-paste glassmorphism component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
GlassmorphismHTMLCSSany framework
Focus
hover to sharpen
Copy into your project
HTML
<div class="nuda-glass-reveal" tabindex="0" aria-label="Hover to sharpen">
<p class="nuda-glass-reveal__title">Focus</p>
<p class="nuda-glass-reveal__sub">hover to sharpen</p>
</div>CSS
/* Blur Reveal
Content sharpens from a frosted blur on hover/focus.
Customize: --glass-reveal-blur */
.nuda-glass-reveal {
--glass-reveal-blur: 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 180px;
height: 110px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(228, 255, 84, 0.12), rgba(255, 255, 255, 0.04));
border: 1px solid rgba(255, 255, 255, 0.12);
filter: blur(var(--glass-reveal-blur));
opacity: 0.7;
transition: filter 0.45s ease, opacity 0.45s ease, transform 0.45s ease;
outline: none;
will-change: filter, transform;
}
.nuda-glass-reveal:hover,
.nuda-glass-reveal:focus-visible {
filter: blur(0);
opacity: 1;
transform: scale(1.03);
}
.nuda-glass-reveal:focus-visible {
box-shadow: 0 0 0 3px rgba(228, 255, 84, 0.5);
}
.nuda-glass-reveal__title {
margin: 0;
color: #fafafa;
font: 800 1.3rem ui-sans-serif, system-ui;
letter-spacing: -0.03em;
}
.nuda-glass-reveal__sub {
margin: 0.2rem 0 0;
color: rgba(250, 250, 250, 0.6);
font: 500 0.72rem ui-sans-serif, system-ui;
}
@media (prefers-reduced-motion: reduce) {
.nuda-glass-reveal {
transition: none;
filter: blur(0);
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.