gradient border glow rotate neon linear premium premium card highlight effect featured pricing tier border CTA button with animated glow hero element accent border need animated gradient border like Linear.app want glowing border without canvas or SVG need premium feel for featured elements
Gradient Border Glow
Fetch snippet JSON:
curl https://webspire.de/snippets/decorative/gradient-border-glow.json Preview
Background
Customize
Quick Start
<div class="gradient-border-glow bg-slate-950 p-6 rounded-xl"><p class="text-white">Featured</p></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 1296 bytes · 58 lines
- Custom Properties
-
--glow-from--glow-to--glow-blur--glow-speed - Classes
-
.gradient-border-glow
gradient border glow rotate neon linear premium
Two-layer gradient glow: a blurred ::before creates the soft outer glow, a sharp ::after draws the visible border line. Both rotate their gradient via background-position animation. Glow intensifies on hover.
Featured card
<div class="gradient-border-glow rounded-xl bg-slate-950 p-8">
<h3 class="text-xl font-bold text-white">Pro Plan</h3>
<p class="mt-2 text-sm text-slate-400">Everything you need, with priority support.</p>
</div>Cyan-green variant
<div class="gradient-border-glow rounded-xl bg-slate-950 p-6"
style="--glow-from: oklch(0.7 0.2 170); --glow-to: oklch(0.6 0.18 200);">
<p class="text-white">Custom glow colors via tokens</p>
</div>