CSS Animated Gradient Border — Free HTML CSS Snippet

Glowing animated borders are one of the most-searched CSS effects — they appear on SaaS landing pages, developer portfolios, and premium component libraries. This snippet demonstrates three production-ready techniques side by side: a CSS @property conic-gradient rotation, a blurred pseudo-element glow pulse, and a padding-box / border-box background clip sweep — all animating continuously with zero JavaScript.

Animated gradient borders appear on countless SaaS product pages, developer portfolio cards, and UI component showcases. They signal premium quality and draw the eye to calls-to-action. Until recently, achieving them required JavaScript-driven canvas or SVG hacks, but modern CSS provides three clean, GPU-accelerated approaches — all demonstrated side by side in this snippet.

Technique 1: CSS @property conic-gradient spin

@property lets you register a custom CSS property with a type annotation. By registering --angle as syntax: '<angle>', the browser knows how to interpolate between angle values. A @keyframes spin { to { --angle: 360deg } } then animates the property from 0° to 360°. The card's background is a conic-gradient(from var(--angle), ...) — as --angle increments each frame, the gradient rotates continuously. Without @property, animating a custom property used inside a gradient is impossible because the browser treats unregistered custom properties as opaque strings and cannot interpolate them.

Technique 2: blurred ::before pseudo-element glow

The glow technique uses a ::before pseudo-element positioned with inset: -3px (3px outside the card on all sides), a background: linear-gradient with background-size: 300% 300%, and a filter: blur(8px). The @keyframes glowPulse animates background-position from 0% 50% to 100% 50% — moving the oversized gradient horizontally creates a colour wash effect. A ::after pseudo-element with the same background as the card interior covers the blurred gradient except at the edges, producing the halo border. This approach has broader browser support than @property since it uses only background-position animation.

Technique 3: padding-box / border-box background clip

CSS allows two background layers with different background-clip values using a shorthand: linear-gradient(#bg, #bg) padding-box, gradient border-box. The first layer fills only the content area (padding-box), while the second fills the entire element including the border area (border-box). Setting border: 2px solid transparent makes the border transparent so the gradient shows through it. Combined with the @property --angle animation on the border-image gradient, the border colour rotates. This technique is the most layout-friendly because it doesn't require a positioned pseudo-element and doesn't affect stacking context.

Browser support and fallbacks

@property is supported in Chrome 85+, Edge 85+, Safari 16.4+, and Firefox 128+. For older Firefox, techniques 2 and 3 degrade gracefully: the glow pulse still works (it only uses background-position animation), and the border-image sweep falls back to a static gradient border. A prefers-reduced-motion media query check in the JS pauses all animations for users who have opted out of motion.

Using animated borders in your project

Apply technique 1 to a .card or .button wrapper by copying the @property registration and the conic-gradient background. For a button with just a border glow (no filled gradient background), use technique 3 with background: #yourColor padding-box, gradient border-box and border: 2px solid transparent. Combine with a neon glow effect on the text for a full cyberpunk aesthetic.