◐ Web & Design

CSS Gradient Generator (Linear, Radial, Conic)

Build linear, radial and conic CSS gradients with draggable stops, OKLCH interpolation (with a fallback line), repeating patterns, and Tailwind arbitrary-value output.

Linear / radial / conic in oklch + fallback Draggable stops Tailwind class

Loading CSS Gradient…

What this page sends

Your input: Processed in this tab and not sent to a server.
Page load: Loading the page requests HTML, scripts and images from ByteKiln, fonts from Google Fonts, and sends Google Analytics page views, tool-usage events and catalog interactions (tool/category IDs, result status and whether a click followed search — never your input, output or search terms). Privacy & sharing

How the CSS Gradient Generator (Linear, Radial, Conic) Works

CSS gradients are easy to write and fiddly to get right: stop positions, the angle convention (0deg points up, not right), the difference between radial shapes, and the muddy middle you get between complementary colors. This generator gives you a live preview with a stop bar you can click to add stops, drag to move them, or adjust with the arrow keys. Choose linear, radial or conic, set the angle or position, and make it repeating. Pick the interpolation color space — OKLCH, OKLab, sRGB, linear sRGB or HSL, with shorter or longer hue paths — and the output includes a plain fallback line before the modern one, so browsers without "in <colorspace>" support still render a gradient. Copy it as CSS or as a Tailwind arbitrary-value class. Stops are validated as any CSS color, sorted by position, and the tool warns about gradients that will look dull in sRGB, repeating gradients that won't repeat, and transparent stops. Generated CSS is checked to parse in a real browser engine.

Gradient types

Linear gradients run along an angle: 0deg is bottom to top, 90deg left to right. Radial gradients spread from a position as a circle or an ellipse. Conic gradients sweep around a center starting from an angle, and their stops are in degrees — the tool converts stop percentages to degrees for you.

Interpolation

CSS Color 4 lets a gradient say which color space to blend in: linear-gradient(90deg in oklch, …). OKLCH and HSL are polar spaces, so you can also choose the hue direction (shorter, longer, increasing, decreasing) — "longer hue" turns a two-color gradient into a rainbow.

Positions

Radial and conic positions accept keywords (center, top left) and lengths or percentages, as one, two or four values ("right 10px bottom 20px"). Three-value positions aren't valid in gradients, and the tool says so instead of producing CSS that browsers ignore.

Output

The CSS output is a background-image declaration, preceded by an sRGB fallback when you use an interpolation method. The Tailwind output is an arbitrary value with spaces replaced by underscores, as Tailwind requires.

Limitations

Linear, radial and conic gradients only — no mesh gradients or SVG gradient output.
Interpolation in OKLCH or other color spaces needs a recent browser; older browsers use the sRGB fallback line the tool writes first.
Tailwind output is an arbitrary value, not a theme extension, so it isn't reusable across classes.
Stops are placed by percentage (or degrees for conic); gradients that need pixel-exact stops, such as hard stripes aligned to a grid, need hand editing.

FAQ

Short answers for the things developers usually ask before trusting a tool.

Is anything uploaded?

No. The gradient is built in your browser; your settings are not sent to a server.

Why does my blue-to-yellow gradient look gray in the middle?

By default browsers interpolate gradients in sRGB, which takes a straight line through the RGB cube. For colors on opposite sides of the color wheel that line passes near gray, so the middle looks muddy. Interpolating "in oklch" goes around the hue circle instead and keeps the saturation — the tool warns you when a pair of stops will have this problem.

Which browsers support "in oklch"?

Color interpolation methods in gradients are supported by Chrome and Edge 111+, Safari 16.2+ and Firefox 127+. The generated CSS includes a plain gradient on the line before as a fallback, so older browsers still show a gradient — just interpolated in sRGB.

How do I use it with Tailwind?

Copy the Tailwind class — an arbitrary value like bg-[linear-gradient(135deg_in_oklch,#6366f1_0%,#ec4899_100%)], where spaces become underscores. Tailwind v4 also has bg-linear-to-r from-… to-… utilities with /oklch modifiers for simple two- or three-stop gradients.

Why does transparent sometimes fade through gray?

Older renderers interpolated colors and alpha separately, so "transparent" (which is transparent black) dragged the middle toward gray. CSS gradients interpolate in premultiplied alpha, so modern browsers fade cleanly. Using the neighbouring color with 0 alpha (#ec489900) is the safe choice for design tools and other renderers.

Related tools

Useful follow-ups when one conversion usually turns into three more.

web-design