Free tool — CSS · Tailwind · SVG

Gradient Palette Builder

Drag the canvas to rotate. Click the rail to drop a stop exactly where you want it. Export when it feels right.

Start from a preset

Custom Gradient

#00c6ff → #0072ff

Drag canvas to rotate

Click bar to add a stop · drag to move · pull down to remove

Color Stops

2 of 5 stops • Drag handles or Edit values

Gradient Settings

Angle135°

Color Interpolation

OKLCH provides perceptually smooth gradients

Repeating Gradient

Quick Harmonies

Lock stops to keep them when randomizing

Extract from Image

Number of Colors: 5

Upload Image

Accessibility & Contrast

White Text

Min: 2.00:1

Avg: 2.94:1

❌ Fails WCAG AA standards

Black Text

Min: 4.85:1

Avg: 7.54:1

WCAG AA requires 4.5:1 for normal text, 3.0:1 for large text (≥18pt or bold ≥14pt)

CSS Background

background-image: linear-gradient(135deg in oklch, #00c6ff 0%, #0072ff 100%);

React Inline Style

style={{ backgroundImage: linear-gradient(135deg in oklch, #00c6ff 0%, #0072ff 100%); }}

Export & Share

ZIP includes CSS, Tailwind, SVG, JSON, PNG preview, and READMEZIP includes CSS, SVG, JSON, PNG & more

Linear Gradients

Flow in a straight line at any angle. Perfect for backgrounds and subtle effects.

Radial Gradients

Radiate from a center point. Great for spotlights, vignettes, and focal points.

OKLCH Colors

Perceptually uniform color space that produces smoother, more natural-looking gradients.