# animated-gradient-border: transparent glass with a spinning conic ring

Source: https://www.michaelchurley.com/blog/animated-gradient-border-transparent-mask-composite  
Published: 2026-06-22  
Author: Michael C. Hurley  
Tags: animated-gradient-border, css, glassmorphism, conic-gradient, mask-composite, css-property, transparent-border, hustlelaunch, static-html, michaelmonetized

![Native demo frame](/blog/animated-gradient-border-transparent-mask-composite/screenshots/hero-native.png)

## Who

I wanted the usual glass card with a rotating gradient border, and I wanted to see the video plate through the middle of the ring. A filled conic disk sitting on top of the glass was the wrong shape for the lab.

For front-end operators who already know `conic-gradient` and still lose an afternoon when the border paints the whole card. Especially anyone comparing this lab to my Next.js glass-design-system `AnimatedBorder` and needing the bare CSS cut.

## What

I built **animated-gradient-border-on-transparent-background**, public [`michaelmonetized/animated-gradient-border-on-transparent-background`](https://github.com/michaelmonetized/animated-gradient-border-on-transparent-background). HEAD `5e9b611`. **5** commits. **0** stars. Language **CSS**. License **GPL-3**. README is **empty** (0 bytes). No version tag. No GitHub Pages. No homepage.

![Card anatomy](/blog/animated-gradient-border-transparent-mask-composite/screenshots/glass-card-anatomy.png)

Product is a static lab:

- `index.html`, 31 lines. Title: Glass Animated Gradient Border. Card classes: `glass rounded border-gradient border-glow animate-rotate-angle`.
- `style.css`, 448 lines (~8.9KB). The technique lives here.
- Plate: `#hero` + `.video-bg` pointing at a remote HustleLaunch webm (`attraction-silent-backdrop.webm`). Repo also carries local `video.webm` (~47MB) and `bg.png`.
- Toggle: fixed darklight checkbox flips ☀️/🌙 via `--scheme` and `:has()`.

The border trick:

1. `::after` paints a full-box `conic-gradient(from var(--conic-gradient-angle), …)`.
2. Dual masks, outer `linear-gradient(#fff 0 0)` plus inner `content-box`, with `padding: var(--border-width)`.
3. `mask-composite: exclude` / `-webkit-mask-composite: xor` keeps **only the ring**.

![mask-composite exclude](/blog/animated-gradient-border-transparent-mask-composite/screenshots/mask-xor-diagram.png)

Spin comes from CSS `@property --conic-gradient-angle` (syntax `<angle>`) and `@keyframes background-spin` 0deg to 360deg, applied to both `::before` (glow) and `::after` (ring) at 3s linear infinite. Glow uses a larger inset, `filter: blur`, and `--intensity-glow` (0.4 light / 0.2 dark).

Same file also ships experimental CSS `@function --transparency` / `--light-dark` wrapping `color-mix` and scheme branching.

![ @property spin + layers ](/blog/animated-gradient-border-transparent-mask-composite/screenshots/css-property-spin.png)

**Sibling fence:** [glass-design-system](https://github.com/michaelmonetized/glass-design-system) reuses the `@property` + mask border idea as `AnimatedBorder` inside a Next.js 16 Apple-SVG glass showcase. This repo is the bare static HTML/CSS lab. Separate from that product spine and from twelveux WebGL glass.

![Sibling vs glass-design-system](/blog/animated-gradient-border-transparent-mask-composite/screenshots/sibling-vs-glass-design.png)

Residue I am not papering over:

- Empty README.
- Native screenshot from 2026-01-29 still shows "Fork on GitHub" / "Download" and a "How it works?" skip link that current `index.html` no longer has.
- Two empty commits: second `simplified` shares tree with first; second `nightly` shares tree with first.
- `video.webm` in-tree while the page loads the remote URL.

## Where

Code: [github.com/michaelmonetized/animated-gradient-border-on-transparent-background](https://github.com/michaelmonetized/animated-gradient-border-on-transparent-background), public. Open `index.html` locally (needs network for the remote webm plate).

```bash
git clone git@github.com:michaelmonetized/animated-gradient-border-on-transparent-background.git
open index.html   # or any static server
```

## When

**2024-08-24.** `8eeb210` mkproject scaffold (editorconfig, prettier, GPL-3 LICENSE, empty README).

**2026-01-30.** `95a48ad` / `de23de9` "simplified": demo HTML/CSS + screenshot + bg + video; second commit empty.

**2026-06-22.** `d087699` / `5e9b611` nightly: `.hustlemc` + `.uncap`; second nightly empty. HEAD.

Repo GitHub `created_at` is 2026-01-30; the mkproject commit timestamp is 2024-08-24 (history carried in).

![Commit arc](/blog/animated-gradient-border-transparent-mask-composite/screenshots/commit-arc.png)

## Why

A gradient border that fills the card is a different product than a ring you can see through. `mask-composite: exclude` is the sentence that makes the middle transparent. The static lab should stay distinct from the Next.js glass design system that absorbed the same border pattern.

**Engagement Q:** Fill the empty README with the mask-xor recipe and retire the stale Fork/Download screenshot, or leave the repo as a raw lab and point operators at glass-design-system for the polished story?