Conic Glow Card
A copy-paste animated gradients component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Animated GradientsHTMLCSSany framework
Glow Card
Copy into your project
HTML
<!-- Conic Glow Card -->
<div class="nuda-ga2-conic-glow">
<div class="nuda-ga2-conic-glow__card">Glow Card</div>
</div>CSS
.nuda-ga2-conic-glow {
position: relative;
width: 220px;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
box-sizing: border-box;
}
.nuda-ga2-conic-glow::before {
content: "";
position: absolute;
inset: 6px;
border-radius: 18px;
background: conic-gradient(from 0deg,#e4ff54,#22d3ee,#a855f7,#e4ff54);
filter: blur(20px);
opacity: .8;
animation: _nuda-ga2conic-glow-spin 6s linear infinite;
will-change: transform;
}
.nuda-ga2-conic-glow__card {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
border-radius: 12px;
background: #111113;
border: 1px solid rgba(255,255,255,.08);
display: flex;
align-items: center;
justify-content: center;
color: #fafafa;
font: 600 15px/1 system-ui,sans-serif;
}
@keyframes _nuda-ga2conic-glow-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion:reduce) {
.nuda-ga2-conic-glow::before {
animation: none;
}
}
How to use Conic 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.