Can I build a conic gradient?

Yes — pick conic from the type selector. Syntax is conic-gradient(from at , stop1, stop2, …). Great for pie charts, color wheels, and pseudo-3D buttons.

What's the OKLCH interpolation hint?

CSS gradients default to interpolating in sRGB, which creates muddy mid-points between vivid colors. linear-gradient(in oklch, red, blue) interpolates perceptually for cleaner ramps. Works in all modern browsers.

Is the output Tailwind-compatible?

Yes — drop the raw gradient string into a custom property, into your tailwind.config.js backgroundImage entry, or use it inline via bg-[linear-gradient(...)] arbitrary classes.

Is anything sent to a server?

No — everything runs in your browser. Brand-aware gradients stay private.

linear · radial · conic · live · local

Build CSS gradients visually

Drag stops, pick colors, tune the angle. Live preview, ready-to-copy CSS for linear, radial and conic gradients. Runs locally in your browser.

CSS Gradient Generator

Type

linear

gradient

Stops

anchors

Angle

135°

rotation

Status

ready

live

input · stops + type

Stops

output · preview + css

background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);

Quick Start

How to build a CSS gradient

Gradients sit on every modern hero, button and card. This editor lets you drag stops, pick the type and copy ready-to-paste CSS.

01
Pick a type
linear for ribbons, radial for spotlights, conic for sweeps and pie charts.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
typeOKLCHCSS Color 4perceptuallive
type · colorlinear · sRGB
```
linear-gradient(...)
```
loaded · normalisedOKLCH · ready
02
Add stops
Each stop is a color at a percentage. Drag percentages to skew transitions.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
stopshex · rgb · hslP3gamut-mappedlive
stops · options2+ · live
```
#3b82f6 0% → #8b5cf6 100%
```
options applied · livelive
03
Tune the angle
0° is top→bottom, 90° is left→right, 135° is the classic diagonal.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
angleWCAG 2.2APCAAA · AAAcontrast
angle · converted135° · ready
```
linear-gradient(135deg, ...)
```
converted · liveWCAG-aware
04
Copy CSS
Paste the declaration into your stylesheet.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
shipclipboardCSS varspalette JSONblob
ok · copiedready · done
```
copied
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to reach for a CSS gradient

From heroes to backgrounds, gradients are everywhere.

Hero backdrops

Soft diagonals make landing pages feel modern. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

CTA buttons

Subtle vertical gradients add depth without skeuomorphism. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Card surfaces

Layer a faint radial under cards for warmth. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Data viz

Gradient strokes on lines and area charts. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Loading shimmer

Animated linear gradients fake skeleton loaders. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Branded gradients

Conic gradients ship branded backgrounds with one declaration. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token

FAQ

Frequently asked questions

Which gradient types are supported?

linear-gradient, radial-gradient, and conic-gradient — the three modern CSS gradient functions.

Can I use transparency?

Yes — type 8-digit HEX (#RRGGBBAA) into the color input.

Why does radial ignore the angle?

radial-gradient spreads from a centre point. It uses size and position, not an angle.

Can I download the CSS?

Yes — download as .css or .txt with one click.

Is anything uploaded?

No — the gradient renders in your browser, locally.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!