Gradient Palette Builder

Design gorgeous CSS & Tailwind gradients with accessibility checks and one-click export.

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: 3.66:1

Avg: 4.89:1

⚠️ Passes large text (≥18pt), fails normal text

Black Text

Min: 3.30:1

Avg: 4.42:1

⚠️ Passes large text (≥18pt), fails normal text

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

Preview Background

Preview

Text Overlay

Beautiful Gradient

Test text legibility overlay

CSS Background

background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

React Inline Style

style={{ backgroundImage: linear-gradient(135deg, #667eea 0%, #764ba2 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.