Glow Border
A copy-paste borders & outlines component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Borders & OutlinesHTMLCSSany framework
Glow Border
Copy into your project
HTML
<div class="nuda-glow-border">
Your content here
</div>CSS
/* Glow Border
Pulsing glow effect around an element.
Customize: --glow-color */
.nuda-glow-border {
--glow-color: #6366f1;
position: relative;
border: 1px solid rgba(99, 102, 241, 0.4);
border-radius: 12px;
background: #111;
padding: 24px 32px;
animation: nuda-glow-pulse 2s ease-in-out infinite alternate;
will-change: box-shadow;
}
@keyframes nuda-glow-pulse {
0% {
box-shadow:
0 0 8px rgba(99, 102, 241, 0.2),
0 0 20px rgba(99, 102, 241, 0.1);
}
100% {
box-shadow:
0 0 15px rgba(99, 102, 241, 0.4),
0 0 40px rgba(99, 102, 241, 0.2);
}
}
@media (prefers-reduced-motion: reduce) {
.nuda-glow-border { animation: none; }
}How to use Glow Border
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.