CSS Gradient Generator

Compose linear, radial and conic gradients with multi-stop editing and copy modern CSS — entirely on this device.

0 bytes uploaded

Gradient controls

Type

LinearRadialConic

Angle (deg)

ShapeExtentPosition x (%)Position y (%)

From angle (deg)Position x (%)Position y (%)

RepeatingInterpolation

Import a gradient

Preview

Color stops2 stops

ColorPosition %Hint %
ColorPosition %Hint %

CSS output

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

background shorthandTailwind class

bg-[linear-gradient(90deg,_#3b82f6_0%,_#8b5cf6_100%)]

Press ? for shortcuts

Do it offline:$ cat gradient.css >> src/styles.css

How to use it

Pick a type: linear takes an angle, radial a shape, extent and center, conic a from-angle and center.
Edit stops — color, 0–100% position and an optional midpoint hint per row; arrow keys nudge a position by 1, Shift+arrow by 10.
Or paste an existing *-gradient() value: a clean parse applies instantly, and a bad one names the failing token, with a Jump to error button that selects the spot.
Copy the declaration, flip to the shorthand or Tailwind form, download a .css file, or share the exact state as a link.

Compose linear, radial and conic CSS gradients from an ordered color-stop list — per-stop position, transition hint and a repeating toggle — then copy the result as a background-image declaration, background shorthand or Tailwind arbitrary value. Pasting an existing *-gradient() string turns it into editable stops. Interpolation runs in sRGB by default, or in oklab and oklch where the browser supports them. Everything computes on this device.

How it works

Output follows the CSS Images grammar: preamble, comma, color stops. linear-gradient() opens with an angle (90deg points right), radial-gradient() with `shape extent at x% y%`, conic-gradient() with `from <angle> at x% y%`. A stop is a color with an optional percentage; a bare percentage between stops is a transition hint. Every preamble part prints explicitly, so the copied CSS carries no hidden defaults.

sRGB blending averages channel values, so far-apart hue pairs meet near the gray middle of the color cube — and `transparent` means rgba(0,0,0,0), so a fade to it can also drift toward black. The `in oklab` and `in oklch` modes from CSS Color 4 interpolate with steady perceived lightness; the tool warns on the sRGB-plus-transparent combination and applies the fix in one click.

Examples

Linear, 90°, #3b82f6 at 0% → #8b5cf6 at 100% (the default state)

linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%)

The page's starting state — the preview is never blank. The Tailwind toggle prints bg-[linear-gradient(90deg,_#3b82f6_0%,_#8b5cf6_100%)]: spaces become underscores, keeping one class.

Conic pie — four colors, two stops each, edges at 25/50/75%

conic-gradient(from 0deg at 50% 50%, #3b82f6 0%, #3b82f6 25%, #8b5cf6 25%, #8b5cf6 50%, #ec4899 50%, #ec4899 75%, #f59e0b 75%, #f59e0b 100%)

Eight stops draw the wheel the Sample button loads. Duplicates stay as authored, and a chip explains: “Color stops share position(s) 25%, 50%, 75% — coincident stops render a hard edge, not a blend.”

radial-gradient(circle at top, rgba(255,0,0,.5), transparent)

radial-gradient(circle farthest-corner at 50% 0%, rgba(255,0,0,.5), transparent)

Import keeps rgba(255,0,0,.5) byte-for-byte, alpha intact, and reports: “`at top` was normalized to `at 50% 0%` — the position controls work in x/y percentages.”

Edge case: #0ea5e9 fading to transparent in sRGB

linear-gradient(180deg in oklab, #0ea5e9 0%, transparent 100%)

In sRGB this state prints linear-gradient(180deg, #0ea5e9 0%, transparent 100%) and warns: “`transparent` is transparent black — interpolating to it in sRGB can pull the fade toward gray; `in oklab` keeps the blend even.” One chip click applies the fix shown here.

Every example on this page is executed against the same engine that powers the tool, on every build.

Gotchas worth knowing

Two stops on one position draw a hard edge

Pies, stripes and progress rings depend on coincident stops, so duplicates are kept and named — never merged behind your back.

Out-of-range positions clamp, with a count

A stop pasted at 120% lands on the 100% control and a warning counts every value pulled in-range; nothing mutates silently.

100+ stops stay workable; the cap is 256

Long lists render through a windowed view, serialization stays linear, add-stop disables at 256, and a larger import refuses with the exact count it saw.

-webkit-gradient() is explained, not guessed

The 2008 argument order can't be mapped mechanically; the refusal spells out rewriting from()/to()/color-stop() pairs as ordered stops.

in oklab is gated on real browser support

The interpolation select enables only when CSS.supports('background: linear-gradient(in oklab, red, blue)') passes; otherwise its options disable with a note, output falls back to sRGB and your saved choice survives.

Pixel stop positions don't map to % controls

`red 40px` is valid CSS, but a pixel offset only resolves against a rendered box — import refuses the token by name rather than invent a conversion.

Common errors

`#3b82g6` is not a valid color — expected hex (3/4/6/8 digits), rgb(), hsl(), oklch(), or a CSS color name.: g is not a hex digit; the message lists the exact grammar every color field and the import row accept.
could not parse near `at top lef` — expected a shape, an extent keyword, `at <position>`, or `in <color space>` here.: A truncated paste fails at a named token with its offset carried, so Jump to error selects the exact spot.
`-webkit-gradient()` is the 2008 pre-standard WebKit syntax and is not imported here — every current browser supports the standard form; rewrite from()/to()/color-stop() pairs as ordered `color position%` stops in linear-gradient() or radial-gradient().: The legacy form's argument order defies a mechanical rewrite, so the refusal says what to write instead.
2 position values outside 0–100% were clamped — the editor's position controls span 0–100%.: Legal CSS, so the import succeeds and warns with an aggregate count — this one came from a paste holding -20% and 120%.
Input is larger than the limit of 65,536 characters for this tool. To add a saved gradient to a stylesheet use the CLI: cat gradient.css >> src/styles.css: The importer takes one gradient value, not a stylesheet — past exactly 65,536 characters it refuses with this banner, whose CLI line appends a downloaded gradient instead.

FAQ

How do I make a smooth gradient?

Keep neighboring stops close in hue, or switch interpolation to in oklab — it blends with even perceived lightness, which removes most banding and mud without extra stops. A transition hint also eases the ramp by dragging the blend's midpoint toward one stop.

What's the difference between linear, radial and conic gradients?

The path the stops travel. Linear runs along a straight line at your angle; radial grows outward from a center as circles or ellipses sized by an extent keyword; conic sweeps around the center like a clock hand, which is why pies and color wheels are conic. One stop list drives all three types.

Why does my gradient look gray in the middle?

Channel-by-channel sRGB averaging of far-apart hues lands near gray, and fading to `transparent` mixes in transparent black on top. The warning chip under the preview switches interpolation to in oklab, which holds lightness steady, in browsers that support it.

Keyboard shortcuts

⌘/Ctrl + C: Copy the CSS declaration when nothing is selected.
⌘/Ctrl + Shift + C: Copy the declaration even over a text selection.
⌘/Ctrl + S: Download a .css file instead of the browser's save-page dialog.
? or ⌘/Ctrl + /: Show the shortcut overlay.
t: Change the color theme; inert while an input has focus.
Esc: Close the topmost overlay.

Nothing you paste here leaves this tab. State only ever travels in links you explicitly create.

MDN — linear-gradient() · MDN — conic-gradient() · W3C CSS Images Module Level 4 — gradients · W3C CSS Color Module Level 4 — color interpolation

Last reviewed: 2026-08-05