Glow Card
A copy-paste neon & glow component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Neon & GlowHTMLCSSany framework
Glow Card
Hover to light the edge.
Copy into your project
HTML
<!-- Glow Card — hover-lit card edge -->
<div class="nuda-neon-card">
<h4 class="nuda-neon-card__title">Glow Card</h4>
<p class="nuda-neon-card__body">Hover to light the edge.</p>
</div>CSS
/* ── Glow Card ───────────────────────────────────────────────
Edge stays dim at rest, then lights up (border + halo) on hover.
Pure transition — no looping animation.
Customize:
--neon-card-color : neon hue
──────────────────────────────────────────────────────────── */
.nuda-neon-card {
--neon-card-color: #e4ff54;
position: relative;
width: 200px;
padding: 20px;
background: #0c0c10;
border: 1px solid rgba(228, 255, 84, 0.18);
border-radius: 14px;
box-shadow: 0 0 0 rgba(228, 255, 84, 0);
transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
will-change: box-shadow, transform;
}
.nuda-neon-card:hover,
.nuda-neon-card:focus-within {
border-color: rgba(228, 255, 84, 0.7);
box-shadow: 0 0 14px rgba(228, 255, 84, 0.35), 0 0 34px rgba(228, 255, 84, 0.2);
transform: translateY(-2px);
}
.nuda-neon-card__title {
margin: 0 0 6px;
font-size: 15px;
font-weight: 700;
color: var(--neon-card-color);
text-shadow: 0 0 8px rgba(228, 255, 84, 0.5);
}
.nuda-neon-card__body {
margin: 0;
font-size: 12px;
line-height: 1.5;
color: #c9cbd1;
}
@media (prefers-reduced-motion: reduce) {
.nuda-neon-card { transition: none; }
.nuda-neon-card:hover,
.nuda-neon-card:focus-within { transform: none; }
}How to use Glow Card
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.