Backgrounds
Gradient Border Glow
An animated glowing gradient frame that traces the edge of a card or section to single it out — a rotating ring plus soft halo, never a fill, so the content inside stays untouched.
$ velocityx add gradient-border-glowBuilt for astro.
Needs a licence key —
subscribe here, then
velocityx loginonce.
Featured plan
Pro — $49/mo
Everything in Starter, plus unlimited seats, priority support and audit logs.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| colors | 'primary' | 'accent' | 'both' | No | 'both' | |
| thickness | number | No | 2 | |
| duration | number | No | 6 | |
| glow | boolean | No | true | |
| radius | string | No | '1rem' | |
| class | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/gradient-border-glow/GradientBorderGlow.astroUsing the Gradient Border Glow component
Install it with velocityx add gradient-border-glow.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Backgrounds.
Calm, full-bleed aurora wash of drifting colour fields for hero and section backdrops. Pure CSS, no canvas or JS, fixed low opacity so body text keeps AA contrast on top.
astroA static technical drafting-table grid with fine minor rules, bolder major rules every few cells, and a faint crosshair origin marker — a precise, no-motion backdrop for engineering, CAD and dev-tool pages.
astroSoft, out-of-focus circles in varied sizes and blur drifting gently behind your content, like camera bokeh behind a subject. Warm and photographic rather than geometric — a gentle backdrop for testimonials, pricing, and about pages.
astroA slow, restrained drift of diagonal bands behind a section — reads as quiet motion rather than decoration, so body copy, forms and pricing tables stay fully legible on top.
astro