--- title: "Rotating Rainbow Border Button" description: "A pill button whose thin gradient outline spins forever, with a blurred glow that blooms on hover." canonical: "https://fx.statico.io/demos/resend-rainbow-button" doc_version: "0.1.0" last_updated: "2026-07-27" date_modified: "2026-07-27T19:06:35-07:00" source: "https://github.com/statico/cool-web-fx" license: "Unlicense" --- > Canonical HTML version: # Rotating Rainbow Border Button A pill button whose thin gradient outline spins forever, with a blurred glow that blooms on hover. Seen on [Resend](https://resend.com/home) · credit Resend. ## How it works This is the "Announcing Resend Forward" pill from Resend's hero, ported with the real CSS. The trick that makes a gradient *rotate* is a registered custom property: `@property --angle { syntax: ""; inherits: false; initial-value: 0deg; }` Registering `--angle` as an `` type makes it **interpolatable**, so a `@keyframes rotate { to { --angle: 360deg } }` can smoothly tween it. A plain CSS variable would jump from 0 to 360 with no in-between frames; the typed `@property` is what lets `linear-gradient(var(--angle), …)` visibly spin. The outer element carries `linear-gradient(var(--angle), #02fcef70 0%, #ffb52b70 50%, #a02bfe70 100%)` (Resend's real cyan→amber→violet, at ~44% alpha) and a 1px padding; an inner `` painted the page's background color (`#0b0e14`) covers everything but that 1px rim, so only a thin rotating outline shows. The animation runs `30s linear infinite`. A `::after` pseudo-element holds a brighter, fully-opaque copy of the same rotating gradient with `filter: blur(20px)`, sat behind the pill at `opacity: 0`. On `:hover` it fades to `0.9` and stretches (`transform: scaleX(1.1)`), blooming a soft glow; the face also darkens slightly. Both the rim and the glow share the same `--angle` keyframe so they stay in lockstep. ## Code Copy this whole file. It is a complete, runnable HTML document — also served verbatim at . ```html Rotating Rainbow Border Button

Rotating Rainbow Border Button

A pill button whose thin gradient outline spins forever, with a blurred glow that blooms on hover.

How it works

This is the "Announcing Resend Forward" pill from Resend's hero, ported with the real CSS. The trick that makes a gradient *rotate* is a registered custom property:

@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

Registering --angle as an <angle> type makes it interpolatable, so a @keyframes rotate { to { --angle: 360deg } } can smoothly tween it. A plain CSS variable would jump from 0 to 360 with no in-between frames; the typed @property is what lets linear-gradient(var(--angle), …) visibly spin.

The outer element carries linear-gradient(var(--angle), #02fcef70 0%, #ffb52b70 50%, #a02bfe70 100%) (Resend's real cyan→amber→violet, at ~44% alpha) and a 1px padding; an inner <span> painted the page's background color (#0b0e14) covers everything but that 1px rim, so only a thin rotating outline shows. The animation runs 30s linear infinite.

A ::after pseudo-element holds a brighter, fully-opaque copy of the same rotating gradient with filter: blur(20px), sat behind the pill at opacity: 0. On :hover it fades to 0.9 and stretches (transform: scaleX(1.1)), blooming a soft glow; the face also darkens slightly. Both the rim and the glow share the same --angle keyframe so they stay in lockstep.

How to use this file

This is a complete, self-contained HTML document — copy it verbatim rather than reconstructing it. Markdown version: https://fx.statico.io/effects/resend-rainbow-button.md. Full writeup and live preview: https://fx.statico.io/demos/resend-rainbow-button.

Source and credit

Effect originally seen on Resend (https://resend.com/home) — credit to Resend. This is an independent recreation built from scratch for educational use; no proprietary source code was copied. Released under the Unlicense.

More

Terms used above are defined in the glossary. See also the site map, AGENTS.md and llms.txt.

Announcing Resend Forward ``` ## Source & credit Effect seen on — credit to Resend. This is an independent recreation of the effect built from scratch for educational use. No proprietary source code was copied. ## Sitemap - [All effects](https://fx.statico.io/index.md) — gallery index - [Site map](https://fx.statico.io/sitemap.md) — every page, grouped - [sitemap.xml](https://fx.statico.io/sitemap.xml) — machine-readable, with lastmod - [AGENTS.md](https://fx.statico.io/AGENTS.md) — how to grab and reuse an effect - [skill.md](https://fx.statico.io/skill.md) — full agent skill file - [llms.txt](https://fx.statico.io/llms.txt) — short index of every effect - [Glossary](https://fx.statico.io/glossary.md) — terminology used in the writeups