Light & surface · 2020–present
Gradient Borders
Cards and elements framed by borders that shift through colours — the gradient lives in the border, not the fill.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(12% 0.01 265) - --fg
oklch(94% 0.008 265) - --muted
oklch(60% 0.012 265) - --surface
oklch(16% 0.012 265) - --surface-2
oklch(20% 0.014 265) - --border
oklch(28% 0.014 265) - --accent
oklch(72% 0.22 290) - --accent-fg
oklch(12% 0.01 265) - --focus
oklch(72% 0.22 290)
| Token | Value |
|---|---|
| --font-body | 'Geist', ui-sans-serif, system-ui, sans-serif |
| --font-display | 'Geist', ui-sans-serif, system-ui, sans-serif |
| --font-mono | ui-monospace, monospace |
| --radius | 14px |
| --radius-sm | 8px |
| --shadow | 0 2px 8px oklch(0% 0 0 / 0.4) |
| --shadow-lg | 0 20px 60px oklch(0% 0 0 / 0.6) |
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&display=swap');
:root {
--bg: oklch(12% 0.01 265);
--fg: oklch(94% 0.008 265);
--muted: oklch(60% 0.012 265);
--surface: oklch(16% 0.012 265);
--surface-2: oklch(20% 0.014 265);
--border: oklch(28% 0.014 265);
--accent: oklch(72% 0.22 290);
--accent-fg: oklch(12% 0.01 265);
--focus: oklch(72% 0.22 290);
--font-body: 'Geist', ui-sans-serif, system-ui, sans-serif;
--font-display: 'Geist', ui-sans-serif, system-ui, sans-serif;
--font-mono: ui-monospace, monospace;
--radius: 14px;
--radius-sm: 8px;
--shadow: 0 2px 8px oklch(0% 0 0 / 0.4);
--shadow-lg: 0 20px 60px oklch(0% 0 0 / 0.6);
}Where it came from
Origin: CSS background-clip technique; late-2010s developer tool and AI SaaS design
CSS has no native gradient border-color property, so gradient borders use a background-image on a pseudo-element or the background-clip: padding-box / border-box trick with a transparent border. The effect became popular in developer tool and AI-SaaS landing pages from around 2020, adding colour identity to minimal dark-mode cards without filling their surfaces with gradients.
How to spot it
- Border that transitions through two or more colours along its path
- Card interior is neutral or near-transparent — the border carries all the colour
- Often paired with dark or muted backgrounds so the border glows
- Conic or rotated gradients for a rotating shimmer effect
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Adds colour identity to minimal dark surfaces | No native CSS support — requires a workaround on every element |
| Works well in both dark and light modes | Becomes visually busy when many gradient-bordered cards share a screen |
| Technically interesting — a small trick that reads as premium craft | Already saturating in AI tool design |
In the wild
- AI-tool feature grid cards
- Developer tool and API product pages
- SaaS pricing tables with a highlighted "recommended" plan
Use it when
Feature cards or highlighted elements that need colour identity without a coloured fill that would overwhelm the content.