gradient border rainbow animated conic-gradient property animated highlight border on featured cards rainbow border effect for CTAs premium UI accent for call-to-action buttons static borders feel flat and boring need animated border without canvas or JS want rotating gradient border in pure CSS
Gradient Border
Fetch snippet JSON:
curl https://webspire.de/snippets/decorative/gradient-border.json
Premium surface
Pro Plan
A moving border gives the card a premium perimeter without changing the content itself.
Background
Customize
Quick Start
<div class="gradient-border"><div class="bg-slate-950 p-6">Content</div></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 1067 bytes · 41 lines
- Custom Properties
-
--gradient-border-width--gradient-border-radius--gradient-border-color-1--gradient-border-color-2--gradient-border-color-3--gradient-border-speed - Classes
-
.gradient-border
gradient border rainbow animated conic-gradient property
A rotating conic gradient border powered by @property to animate the gradient angle. The inner content needs its own background to create the “border” illusion.
Featured card with gradient border
<div class="gradient-border">
<div class="bg-slate-950 p-6 rounded-xl">
<h3 class="text-lg font-bold text-white">Pro Plan</h3>
<p class="text-slate-400 mt-2">Everything you need</p>
</div>
</div>