--- title: "Conic Gradient Sweep Border" description: "A card whose border is a bright arc that sweeps around the perimeter, painted with a rotating conic gradient." canonical: "https://fx.statico.io/demos/resend-conic-border" 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: # Conic Gradient Sweep Border A card whose border is a bright arc that sweeps around the perimeter, painted with a rotating conic gradient. Seen on [Resend](https://resend.com/home) · credit Resend. ## How it works Resend uses this on the "Everything in your control" product tabs (the "Intuitive analytics" card) and on the "Send test email" pill. The border is painted with the **two-background-clip trick**: `background: linear-gradient(#0b0e14,#0b0e14) padding-box, conic-gradient(from var(--angle) …) border-box;` The first layer is clipped to the *padding box* (the face), the second to the *border box* (face **plus** the border ring) — so the conic gradient is only ever visible in the few px of border the face doesn't cover. Rotating the conic gradient's start angle (`from var(--angle)`) sends its bright arc travelling around the edge. As in the rainbow-border button, `--angle` is a registered `@property` of type `` so it can be tweened by `@keyframes`. On the real site the sweep is a **one-shot**: when a tab becomes active, JavaScript (Framer Motion) animates `--angle` from `0deg`→`360deg` with an `ease-in` curve while fading the arc's `--color` in at the start and back out near the end, so a glow makes one lap and vanishes. Here it loops continuously so the effect is always on screen. The arc color is Resend's real light tone (`rgb(234,234,234)`) with an emerald accent (`#4ade80`) for the "active" state; a blurred `::after` carrying the same conic gradient adds an outer glow. The card contents (a faux delivery sparkline and metrics) are ordinary markup inside the padding box. ## Code Copy this whole file. It is a complete, runnable HTML document — also served verbatim at . ```html Conic Gradient Sweep Border

Conic Gradient Sweep Border

A card whose border is a bright arc that sweeps around the perimeter, painted with a rotating conic gradient.

How it works

Resend uses this on the "Everything in your control" product tabs (the "Intuitive analytics" card) and on the "Send test email" pill. The border is painted with the two-background-clip trick:

background: linear-gradient(#0b0e14,#0b0e14) padding-box, conic-gradient(from var(--angle) …) border-box;

The first layer is clipped to the *padding box* (the face), the second to the *border box* (face plus the border ring) — so the conic gradient is only ever visible in the few px of border the face doesn't cover. Rotating the conic gradient's start angle (from var(--angle)) sends its bright arc travelling around the edge.

As in the rainbow-border button, --angle is a registered @property of type <angle> so it can be tweened by @keyframes. On the real site the sweep is a one-shot: when a tab becomes active, JavaScript (Framer Motion) animates --angle from 0deg→360deg with an ease-in curve while fading the arc's --color in at the start and back out near the end, so a glow makes one lap and vanishes. Here it loops continuously so the effect is always on screen.

The arc color is Resend's real light tone (rgb(234,234,234)) with an emerald accent (#4ade80) for the "active" state; a blurred ::after carrying the same conic gradient adds an outer glow. The card contents (a faux delivery sparkline and metrics) are ordinary markup inside the padding box.

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-conic-border.md. Full writeup and live preview: https://fx.statico.io/demos/resend-conic-border.

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.

Intuitive analytics
Delivered · last 30 days
99.1%
DELIVERED
12,840
SENT
41.2%
OPENED
``` ## 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