18 CSS Gradient UI

A gradient UI system is when you treat gradients as a first-class token in your design system — not decoration you sprinkle on the odd button, but a coordinated visual layer that spans your entire UI (buttons, cards, borders, badges, backgrounds, text, progress, avatars, focus states). Compare Stripe's dashboard (subtle blue-to-purple gradients on primary CTAs, gradient status pills, gradient sparklines, gradient hover glows on cards), Linear (aurora backgrounds + gradient priority badges + gradient issue-progress bars), Vercel v0 (gradient AI-generation cards + gradient dark-mode toggle + gradient plan-tier badges), Cursor (gradient AI console spotlight cards, gradient composer bars), Framer (gradient hero backgrounds + gradient CTA buttons), Notion (subtle gradient page banners + gradient status tags), Superhuman ($30/mo webmail with gradient onboarding flows), Mercury / Ramp / Brex (fintech dashboards with gradient premium-tier badges + gradient chart fills). Each of those products picked a gradient palette early and applied it systematically — that's why the visual identity reads coherent instead of Y2K-cluttered. This collection ships 18 gradient patterns that all share the same design tokens (— --tint, --acc, --from, --to) so you can rebrand the whole system by swapping 4 CSS variables. Contrast to isolated gradients — a single gradient button dropped into an otherwise flat UI reads as an accident (a designer just discovered linear-gradient()). A gradient UI system reads as intentional visual language. Google's own 2024-2026 Material Design 3 refresh moved this direction with tonal palettes derived from a single source color; Apple's iOS 26 refresh doubled down on gradient surface tiers; every AI-product launch in 2025-2026 (Perplexity, Claude, Gemini, Copilot X) shipped with gradient-first UI because gradients read premium and modern in a way flat design does not. This collection gives you the working ingredients: pick 3-6 patterns per surface, share the palette across them, and your product looks like it was designed by a team with a design system instead of a solo dev copy-pasting from CodePen.

The 2026 gradient toolkit is four spec-level primitives that together replace ~90% of what old sites needed JavaScript / SVG / Sass mixins for. (1) @property (Baseline: Chrome 85 / Safari 16.4 / Firefox 128) — registers a custom property with a syntax + inherits + initial-value. Registered angle-typed properties (@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false }) can be animated smoothly by transitions and @keyframes. Without @property, animating --angle: 0deg → 360deg just jump-swaps at the end because the browser sees them as strings. WITH @property, the browser interpolates through 1° per frame at 60fps on the compositor thread. This is what makes conic-gradient border spinning (Demo 03) and rotating avatar rings (Demo 17) possible in pure CSS. (2) oklch() (Baseline: Chrome 111 / Safari 15.4 / Firefox 113 — widely available since 2023) — perceptually-uniform color space where a fixed lightness increment (e.g. 0.15 → 0.10) gives you a visually-equal step across every hue. Sass mixins used to fake this via lighten($color, 15%) but sRGB isn't perceptual — the same 15% shift makes blue look black and yellow look identical. oklch() ships the fix at the browser level, zero preprocessing. (3) color-mix() (same Baseline) — declaratively blend two colors: color-mix(in oklch, var(--brand) 30%, var(--surface)). Replaces 6-tier hand-tuned tonal palettes with one derivation formula. (4) conic-gradient() (Baseline: Chrome 69 / Safari 12.1 / Firefox 83) — sweeps a gradient around a center point instead of along a line. Powers rotating spinners (Demo 06), border sweeps (Demo 03), donut charts, and Instagram-style story rings (Demo 17). Combined with @property --angle for the rotation, you replace ~40KB of GSAP + animation code with 6 lines of CSS. Every demo in this collection uses at least 2 of these 4 primitives — see each demo's howItWorks for the exact recipe.

The recipe every tier-1 SaaS marketing hero ships in 2026 is three lines: .gradient-text { background: linear-gradient(90deg, var(--from), var(--to)); background-clip: text; -webkit-background-clip: text; color: transparent }. Demos 12, 13, 14, 15 in this collection show four variations (aurora text, hover-reveal flow, animated link underlines, metallic chrome text). The accessibility trap: color: transparent makes the text invisible if the gradient fails to paint. Failure modes: (a) old browsers that don't support background-clip: text — the text shows as transparent-on-background, effectively invisible; (b) high-contrast forced-colors mode (Windows High Contrast, macOS Increase Contrast) — some browsers force color to system colors but leave background-clip: text active, painting text in system color while the gradient goes invisible (which is actually what you want) but some engines get this backwards; (c) print stylesheets — printers often ignore background-clip and print transparent text as white. The fix: wrap the entire declaration in @supports (background-clip: text) or (-webkit-background-clip: text) { ... } so the fallback is the normal color: var(--ink) declaration outside the @supports block. Every gradient-text demo in this collection ships this @supports guard — audit any codebase you inherit for gradient text without it, because the invisible-text failure mode is a WCAG 1.4.3 (Contrast) violation that Axe DevTools flags and enterprise procurement audits reject. Additional accessibility non-negotiable: never use gradient text on interactive elements (buttons, links) as the SOLE indicator of a state (active, hover, focus) — colorblind users can't distinguish gradient hues. Pair gradient text state changes with an underline, weight shift, or box (Demo 14 does this by pairing gradient underlines with underline-thickness changes).

Gradient UI systems are the single highest-leverage visual signal for tier-1 SaaS + Web3 + AI + premium fintech products because they read as premium, modern, and designed-by-a-team without shipping a single premium asset. Six demos in this collection map to very-high-CPM verticals: Demo 01 (6-variant gradient button hover) — Stripe / Linear / Vercel / Framer / Notion primary CTA pattern. SaaS marketing CPM $15-25, luxury SaaS ($99+/mo tier Superhuman/Cron/Cursor Pro) $20-35. Demo 03 (3 gradient border techniques) — the conic-orbit variant is the Vercel v0 / Aceternity UI / Magic UI premium card border, the mask-ring is the Framer / Linear feature-card pattern. AI product marketing $20-40, developer tools $8-25. Demo 07 (mesh / aurora background) — Linear aurora, Vercel v0 hero, Framer AI landing, Cursor Cmd+K spotlight — every 2025-2026 AI product launch ships with a mesh gradient. AI $20-40 CPM. Demo 08 (glassmorphism over gradient) — Apple iOS 26 / macOS Tahoe surface aesthetic, plus every fintech signup card (Ramp $25-45 / Brex $25-45 / Mercury Bank $25-45, all fintech). Demo 15 (metallic/gold/chrome text with shine) — invitation / awards / premium-tier / concierge aesthetic. Very-high-CPM: legal-tech consultancy ($30-60), private banking ($40-80), luxury real-estate ($25-50 metro, $50-100 tier-1 city). Demo 17 (conic avatar rings) — Instagram story ring, Slack presence, Discord voice states, Linear collaborator dots, Superhuman-style webmail. SaaS collaboration $8-25 CPM. Beyond direct mapping, gradients also carry Web3 vertical signals — every wallet UI (MetaMask, Coinbase Wallet, Rainbow, Phantom, Rabby) ships with gradient tokens for chain identity (Ethereum blue-to-purple, Solana purple-to-cyan, Polygon purple, Base blue). Web3 CPM $8-15, DeFi $15-30, luxury NFT $25+. Each vertical rewards the WCAG 2.2 AA + Baseline 2023 modern-CSS moat this collection ships — enterprise procurement in fintech / healthcare / legal has accessibility and Core Web Vitals as literal RFP checklist items.

The three sibling collections and this one solve different jobs. css-gradient-animation — technique-first showcase for HOW to animate gradients (keyframe timing, @property angle, background-position pan, hue rotation). Use it when you're learning the mechanics. css-gradient-buttons — component library of standalone gradient button variations. Use it when you need a button and want to pick a style. css-gradient-text — component library of standalone gradient text treatments. Use it when you need clipped text and want to pick a style. css-gradient-ui (this collection) — system-first. Each demo is a full UI surface (dashboard, sign-in, awards, changelog, AI console, filter rail) that shows gradients working together across multiple element types with shared design tokens. The differentiation matters for SEO too — 'css gradient button' searchers want a button gallery; 'css gradient UI' searchers want a coordinated system they can lift wholesale. Some overlap is intentional (Demos 12/13/14/15 all clip text with gradients; Demo 01 is a button hover lab) but the framing is always 'this is one surface of a design system', not 'here's another button.' If you're auditing a project's gradient usage: start with the buttons/text/animation siblings to pick individual patterns, then use this collection to see how tier-1 products stitch them into a consistent visual language. Cross-linked in both directions via seeAlso.

Every gradient primitive in this collection is Baseline-supported since at least 2023, which means 96%+ of tier-1 country traffic (US/UK/CA/AU/NZ) supports every feature without fallbacks. Detailed support matrix as of August 2026: linear-gradient / radial-gradient — universal since 2011, no fallback needed. conic-gradient — Baseline widely available since 2020 (Chrome 69 / Safari 12.1 / Firefox 83). No fallback. oklch() / color-mix() — Baseline widely available since 2023 (Chrome 111 / Safari 15.4 / Firefox 113). Falls back gracefully to browser default when unsupported. If you need to support pre-2023 corporate browsers (IE11 died 2022; some Enterprise Edge 15 fleets remain), provide hex fallback: background: #7c3aed; background: linear-gradient(90deg, oklch(0.55 0.19 300), oklch(0.72 0.16 280)). Browser reads both, uses the last it understands. @property — Baseline newly available since April 2024 (Chrome 85 / Safari 16.4 / Firefox 128). Without it, animated angles jump-cut instead of interpolating. Wrap in @supports (background: paint(worklet)) as a rough proxy — most fine-grained detection is via CSS.registerProperty feature test. Every demo in this collection using @property degrades to a static angle (still-visible) — no invisible-content failure mode. background-clip: text — Baseline since 2020 (with -webkit- prefix); Firefox 49+ / Chrome 3+ / Safari 4+ prefixed. Always paired with -webkit-background-clip: text for Safari. Wrap in @supports (background-clip: text) or (-webkit-background-clip: text) { ... } so the fallback (normal color: var(--ink)) is used when unsupported — this is the invisible-text-in-old-browsers fix. mask-image / mask-composite — universal via -webkit-mask-* prefix + Baseline unprefixed since 2023. Always pair prefixed + unprefixed. backdrop-filter (Demo 08 glassmorphism) — Baseline widely available since March 2024 (Chrome 76 / Safari 9 / Firefox 103). Wrap in @supports not (backdrop-filter: blur()) fallback with a semi-transparent background. Every demo in this collection ships the appropriate @supports guards — no post-migration accessibility surprises.

Every demo is plain HTML + CSS with zero dependencies, zero build steps, and zero framework lock-in. To port to React / Next.js App Router: rename class to className, drop the JSX into any server or client component (no 'use client' directive needed for the 16 Pure CSS demos because they have no interactivity that requires hydration; only Demo 06 progress ticker and Demo 16 cursor-tracking spotlight need it, each under 30 lines JS). Vue 3 / Nuxt 3: accepts as-is, class attribute is native. Svelte / SvelteKit: accepts as-is. Astro: drop into any .astro component (this site is Astro; every one of these demos renders SSR on this page). Remix / Solid.js / Qwik: accepts as-is. Tailwind CSS v3/v4: gradients port to bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 or arbitrary values bg-[linear-gradient(90deg,#7c3aed,#ec4899)]; conic-gradients require Tailwind v3 arbitrary values or v4 utility classes. For @property + oklch() + color-mix(), use Tailwind's arbitrary-value bracket syntax or drop into a @layer components block. Compared to framework-specific gradient libraries: Aceternity UI (React + Tailwind gradient components, subscription $299+/yr for premium) — this collection ships the same visual patterns MIT-licensed. Magic UI (React + Framer Motion + Tailwind, ~150KB of dependencies) — matches this collection's Demo 03 border-beam and Demo 16 spotlight in zero-dependency form. shadcn/ui — no dedicated gradient primitives; you build them yourself atop Radix + Tailwind. @radix-ui — no gradient utilities; primitives are unstyled. @mui/material Gradient — locked into MUI's ~85KB total bundle. Chakra UI Gradient — locked into Chakra's Emotion runtime ~50KB. Every gradient primitive in this collection is native CSS since Baseline 2023 — no library replicates what the browser doesn't already do. The .cgu-NN numeric-prefix scoping means all 18 gradient UI patterns coexist on the gallery page without a single class collision, and the same prefix guarantees you can drop any one demo into a codebase that already uses .gradient, .card, .btn, .hero, or .badge classes without renaming a single selector. MIT licensed, no attribution required, no signup.