Graduo

Graduo — Tailwind & OKLCH gradient generator

Build linear, radial, and conic CSS gradients with OKLCH interpolation that skips the gray dead zone, then copy them as Tailwind arbitrary-value classes, plain CSS, or SCSS. Everything runs in your browser and stays shareable through the URL — no signup, no paywall.

gradient-editor
135°
Presets

Start inspired.

Recent

Your History

Copy a gradient to start building history
Snippet library

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

Most production gradients start from a known-good pattern rather than a blank background: line. The snippets below are organized by category — linear, radial, conic, hero washes, mesh effects, UI components — so you can copy one straight into a stylesheet or className and retune 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:

KeywordEquivalent angle
to top0deg
to top right45deg
to right90deg
to bottom right135deg
to bottom180deg (default)
to bottom left225deg
to left270deg
to top left315deg
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
SymptomCauseFix
Tailwind class renders as raw textA 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 middleDefault sRGB interpolationAdd in oklch to the gradient function: linear-gradient(in oklch, …)
background-clip: text shows no textMissing webkit prefix or non-transparent colorAdd both -webkit-background-clip: text; and color: transparent;
Radial gradient is a circle when ellipse was intendedForgot to drop the circle keywordRemove circle (default shape is ellipse) or set the shape explicitly
Conic gradient has a visible seam at 360°Start and end colors differRepeat the first color at the final stop to close the loop
OKLCH polar interpolation goes through the wrong hueTook the longer arc around the hue wheelDefault is shorter hue; if needed, switch with longer hue: linear-gradient(in oklch longer hue, …)
Stops appear banded on dark backgrounds8-bit display precision compounding low-chroma transitionsAdd 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 colorLayer order in comma-separated backgroundThe base solid must be the last entry; the first entry sits on top
URL gradient share link is too longMany stops with redundant precisionRound 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.