Start inspired.

Recent

Your History

Copy a gradient to start building history

Snippet library

CSS gradient snippets: linear, radial, conic, mesh, Tailwind, and SCSS.

The tool above generates one gradient with custom stops, color space, and output format. This reference collects gradient snippets organized by category so you can copy a working starting point straight into a stylesheet or className, then tweak the colors to taste. Every snippet uses in oklch interpolation; drop that clause to fall back to sRGB if you need to.

Linear gradient basics

css

/* Two-stop, default direction (top to bottom) */
background: linear-gradient(in oklch, #6366f1, #8b5cf6);

/* Diagonal with shorthand direction */
background: linear-gradient(to bottom right in oklch, #06b6d4 0%, #3b82f6 100%);

/* Explicit angle */
background: linear-gradient(135deg in oklch, #ec4899 0%, #f59e0b 100%);

/* Three-stop via */
background: linear-gradient(in oklch, #ef4444 0%, #a855f7 50%, #3b82f6 100%);

/* Hard stops (two flat color bands, no transition) */
background: linear-gradient(90deg, #b8ff00 50%, #07070a 50%);

/* Striped pattern from layered hard stops */
background: repeating-linear-gradient(45deg, #1a1a24 0 10px, #13131b 10px 20px);

Direction shorthand to angle reference:

Keyword	Equivalent angle
to top	0deg
to top right	45deg
to right	90deg
to bottom right	135deg
to bottom	180deg (default)
to bottom left	225deg
to left	270deg
to top left	315deg

Radial and conic gradients

css

/* Circle centered */
background: radial-gradient(circle in oklch, #fde68a 0%, #f97316 100%);

/* Ellipse anchored to a corner with transparent falloff */
background: radial-gradient(ellipse at top left in oklch, #fbbf24 0%, transparent 70%);

/* Fixed-size circle for spotlight effects */
background: radial-gradient(circle 400px at center in oklch, #34d399, #059669);

/* Conic full spin around the center */
background: conic-gradient(in oklch from 0deg, #ff2d8a, #8b5cf6, #00e5ff, #b8ff00, #ff2d8a);

/* Conic angled from a side, useful for pie-chart shapes */
background: conic-gradient(in oklch from 90deg at 50% 50%, #f43f5e, #fb923c, #facc15, #f43f5e);

/* Repeating conic for sunburst patterns */
background: repeating-conic-gradient(in oklch from 0deg, #1a1a24 0 6deg, #13131b 6deg 12deg);

A conic gradient that ends on a different color than it started will show a hard seam at 360 degrees. Repeat the first color at the final stop to close the loop.

Hero and large-surface gradients

css

/* Soft pastel hero for marketing sites */
background: linear-gradient(135deg in oklch, #fdf2f8 0%, #e0e7ff 100%);

/* Brand-vivid hero (Graduo's own four-stop) */
background: linear-gradient(135deg in oklch, #ff2d8a 0%, #8b5cf6 35%, #00e5ff 70%, #b8ff00 100%);

/* Dark hero with depth through a near-black anchor */
background: linear-gradient(160deg in oklch, #0f172a 0%, #1e1b4b 50%, #312e81 100%);

/* Sunset wash from night to dawn */
background: linear-gradient(180deg in oklch, #1e3a8a 0%, #be185d 45%, #f97316 75%, #fde68a 100%);

/* Reading-friendly low-contrast hero */
background: linear-gradient(180deg in oklch, #ffffff 0%, #f4f2f0 100%);

Aurora and mesh-style backgrounds

True mesh gradients are not first-class CSS yet. Stack two to four radial gradients with transparent falloff over a solid base color for the same visual effect.

css

/* Three-layer aurora over a dark canvas */
background:
  radial-gradient(ellipse at 20% 30% in oklch, rgba(139,92,246,0.35) 0%, transparent 50%),
  radial-gradient(ellipse at 80% 20% in oklch, rgba(0,229,255,0.30) 0%, transparent 55%),
  radial-gradient(ellipse at 50% 80% in oklch, rgba(255,45,138,0.25) 0%, transparent 60%),
  #07070a;

/* Pointer-tracking spotlight (set --mouse-x / --mouse-y from JS) */
background:
  radial-gradient(circle 300px at var(--mouse-x, 50%) var(--mouse-y, 50%) in oklch,
    rgba(184,255,0,0.12), transparent 70%),
  #0e0e14;

/* Static "blob" mesh for hero panels */
background:
  radial-gradient(at 0% 0% in oklch, #f0abfc 0%, transparent 50%),
  radial-gradient(at 100% 0% in oklch, #67e8f9 0%, transparent 50%),
  radial-gradient(at 100% 100% in oklch, #fde68a 0%, transparent 50%),
  radial-gradient(at 0% 100% in oklch, #fda4af 0%, transparent 50%),
  #fafafa;

Comma-separated layers in background stack front-to-back. The first layer is on top; the last layer is the base.

UI component patterns

css

/* Glass surface for a card */
background:
  linear-gradient(135deg in oklch,
    rgba(255,255,255,0.08) 0%,
    rgba(255,255,255,0.02) 100%);
backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.10);

/* Animated button (shift background-position on hover) */
background: linear-gradient(120deg in oklch, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%);
background-size: 200% auto;
transition: background-position 0.4s ease;
/* :hover { background-position: right center; } */

/* Hairline gradient divider */
background: linear-gradient(90deg in oklch, transparent 0%, #2a2a38 50%, transparent 100%);
height: 1px;

/* Gradient text via background-clip */
background: linear-gradient(135deg in oklch, #ff2d8a, #8b5cf6, #00e5ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;

/* Border gradient using background-origin */
border: 2px solid transparent;
background:
  linear-gradient(#0e0e14, #0e0e14) padding-box,
  linear-gradient(135deg in oklch, #ff2d8a, #00e5ff) border-box;

Tailwind arbitrary-value syntax

Tailwind v3's from- / via- / to- color-stop directives interpolate in sRGB and cannot express in oklch. Use arbitrary-value classes for the modern interpolation:

html

<!-- Two-stop OKLCH linear -->
<div class="bg-[linear-gradient(135deg_in_oklch,#6366f1_0%,#8b5cf6_100%)]">

<!-- Three-stop OKLCH linear -->
<div class="bg-[linear-gradient(in_oklch,#ef4444,#a855f7,#3b82f6)]">

<!-- Radial -->
<div class="bg-[radial-gradient(circle_in_oklch,#fde68a,#f97316)]">

<!-- Conic full spin -->
<div class="bg-[conic-gradient(in_oklch_from_0deg,#ff2d8a,#8b5cf6,#00e5ff,#b8ff00,#ff2d8a)]">

<!-- Gradient text -->
<span class="bg-[linear-gradient(135deg_in_oklch,#ff2d8a,#00e5ff)] bg-clip-text text-transparent">

Underscores are Tailwind's required substitute for spaces inside arbitrary-value []. A literal space breaks the class; commas inside the gradient function are fine.

SCSS variables for design tokens

scss

$gradient-hero: linear-gradient(135deg in oklch, #ff2d8a 0%, #8b5cf6 35%, #00e5ff 70%, #b8ff00 100%);
$gradient-button: linear-gradient(120deg in oklch, #ec4899, #8b5cf6, #06b6d4);
$gradient-divider: linear-gradient(90deg in oklch, transparent, #2a2a38, transparent);

$aurora-pink:   radial-gradient(ellipse at 20% 30% in oklch, rgba(255,45,138,0.30) 0%, transparent 55%);
$aurora-violet: radial-gradient(ellipse at 80% 20% in oklch, rgba(139,92,246,0.30) 0%, transparent 55%);
$aurora-cyan:   radial-gradient(ellipse at 50% 80% in oklch, rgba(0,229,255,0.30) 0%, transparent 55%);

.hero        { background: $gradient-hero; }
.btn-primary { background: $gradient-button; }
.aurora      { background: $aurora-pink, $aurora-violet, $aurora-cyan, #07070a; }

Common gotchas

Symptom	Cause	Fix
Tailwind class renders as raw text	A literal space inside bg-[…]	Replace every space with an underscore, e.g. bg-[linear-gradient(135deg_in_oklch,#fff,#000)]
Gradient turns gray in the middle	Default sRGB interpolation	Add in oklch to the gradient function: linear-gradient(in oklch, …)
background-clip: text shows no text	Missing webkit prefix or non-transparent color	Add both -webkit-background-clip: text; and color: transparent;
Radial gradient is a circle when ellipse was intended	Forgot to drop the circle keyword	Remove circle (default shape is ellipse) or set the shape explicitly
Conic gradient has a visible seam at 360°	Start and end colors differ	Repeat the first color at the final stop to close the loop
OKLCH polar interpolation goes through the wrong hue	Took the longer arc around the hue wheel	Default is shorter hue; if needed, switch with longer hue: linear-gradient(in oklch longer hue, …)
Stops appear banded on dark backgrounds	8-bit display precision compounding low-chroma transitions	Add a small amount of noise as a layered SVG or filter: contrast(1.02); OKLCH typically reduces this on its own
Mesh layers cover the base solid color	Layer order in comma-separated background	The base solid must be the last entry; the first entry sits on top
URL gradient share link is too long	Many stops with redundant precision	Round positions to whole percentages and color hex to 6 digits; under 2,000 chars accommodates eight stops

Related concepts

Color-interpolation methods. sRGB, OKLCH, OKLab, LCH, and HSL each produce a different midpoint when blending two colors.
CSS Color Module Level 4. The spec that introduced the oklch() function and the in <colorspace> interpolation clause.
Tailwind arbitrary values. The [value] bracket syntax that lets any CSS value land inside a utility class.
Layered backgrounds. Comma-separated background declarations stack front-to-back and power CSS mesh effects.
CSS custom properties for gradients. Variables like --mouse-x make gradients respond to pointer position and other live state.