CSS gradients that don't go gray.
The free CSS gradient generator with Tailwind output and OKLCH color quality. Build vibrant gradients without the dead zone.
Open EditorWhy CSS gradients go gray, and how OKLCH fixes the midpoint
sRGB was standardized as IEC 61966-2-1 in 1996, codifying the color response of cathode-ray tube monitors that were already on their way out. CSS gradients arrived 12 years later, in the 2008 Working Draft of CSS Image Values and Replaced Content Level 3. The interpolation problem those two specs produced together has been sitting in browsers ever since.
sRGB was designed for cathode-ray tubes, not gradients
The sRGB working group's brief was reproducibility across monitors, scanners, and printers in a Windows-era PC ecosystem. The non-linear transfer function they picked, a piecewise curve approximating gamma 2.2, models the voltage-to-luminance response of a CRT phosphor. Fine assumption for a single static color on a 1996 monitor, wrong assumption for blending two colors along a straight line.
When linear-gradient(135deg, #6366f1 0%, #ef4444 100%) renders, the browser walks the RGB cube from indigo to coral one channel at a time. At 50%, each channel is the simple average of its endpoints, landing in a low-chroma neighborhood where R, G, and B values are similar in magnitude. Vivid endpoints, bruised midpoint.
This is the gray dead zone. It's what happens when you draw a straight line through a color space nobody designed to be traversed.
What the RGB cube does to complementary colors in transit
The problem is worst for complementary hues, where one endpoint is high in red and low in blue and the other is the reverse. Their straight-line average lands near the geometric center of the RGB cube, which is also near the achromatic axis. Same-hue gradients stay vivid because they never cross that center. Complementary gradients dive straight through it.
Here's the path a blue-to-yellow gradient takes through both spaces.
| Stop | Endpoint or midpoint | sRGB hex | sRGB chroma | OKLCH (L C H) | OKLCH chroma |
|---|---|---|---|---|---|
| 0% | Royal blue endpoint | #1d4ed8 | 0.21 | 0.46 0.18 264 | 0.18 |
| 25% | sRGB straight-line interpolation | #5673b9 | 0.10 | 0.51 0.10 261 | 0.10 |
| 50% | sRGB midpoint | #90989a | 0.01 | 0.62 0.01 219 | 0.01 |
| 50% | OKLCH midpoint | #a59650 | 0.13 | 0.66 0.13 92 | 0.13 |
| 75% | sRGB straight-line interpolation | #cabd5e | 0.13 | 0.78 0.13 95 | 0.13 |
| 100% | Goldenrod endpoint | #facc15 | 0.16 | 0.86 0.16 92 | 0.16 |
Read down the sRGB chroma column. The gradient starts vivid at 0.21, drops to nearly zero at 50%, then climbs back. The OKLCH 50% row holds at 0.13, with a hue that has rotated cleanly from blue (264 degrees) to yellow (92 degrees) by the shortest arc rather than diving through neutral. That row is what Graduo's linear-gradient(in oklch, ...) output produces by default. The sRGB midpoint #90989a is the gray of a stainless-steel appliance. We've shipped that gradient into hero sections we're not proud of.
What about HSL? Doesn't that fix it?
HSL rotates around the hue wheel, which keeps chroma higher than sRGB, but its lightness coordinate isn't perceptually uniform. A 50% lightness yellow and a 50% lightness blue look nothing alike in perceived brightness, so HSL gradients drift in luminance even when they stay colorful. OKLCH separates lightness, chroma, and hue on perceptually uniform axes, which is the property HSL claims but doesn't deliver.
CSS Color Level 4 and the oklch() keyword
OKLCH is the cylindrical form of OKLab, published by Bjorn Ottosson in December 2020 on his personal blog. The space is calibrated against the CIE Lab perceptual data set, with refinements that fix Lab's well-known blue-region distortion. CSS picked it up quickly.
CSS Color Module Level 4 added the oklch() function and the color-interpolation-method syntax that makes linear-gradient(in oklch, ...) legal CSS. The edit landed in the Editor's Draft on 2021-12-22, and the function reached W3C Candidate Recommendation status in July 2022. The in <color-space> clause for gradients was specified in the same module, alongside in oklab, in lch, in hsl, and longer hue / shorter hue modifiers for the polar spaces.
Tailwind CSS v3 has no first-class gradient color-space directive, which is why Graduo's Tailwind output ships as an arbitrary-value class:
bg-[linear-gradient(in_oklch,oklch(0.55_0.26_290)_0%,oklch(0.55_0.24_25)_100%)]The underscores are Tailwind's required substitute for spaces inside [] values. Drop the class into a className and it works without any config change.
Where the browser support lines fall today
The oklch() function and in oklch interpolation have been usable in every major browser since 2023.
- Chrome 111 (March 2023). Edge tracks Chromium.
- Safari 16.4 (March 2023). The
oklch()function alone shipped in 16.2 in December 2022; the gradient interpolation keyword took one more release. - Firefox 113 (May 2023).
That puts current OKLCH support above 95% global usage as of mid-2026. A browser that doesn't understand in oklch falls back to default sRGB interpolation, the same gradient every CSS generator has emitted since 2008. The endpoint colors are unchanged; only the midpoint shifts.
Do I need a fallback for IE 11?
No. IE 11 was removed from Windows 10 support on 2022-06-15 and doesn't implement most of CSS Color Level 3, let alone Level 4. If your audience still includes IE 11, OKLCH is the smallest of your problems.
The design choices Graduo makes and the trade-offs you inherit
OKLCH is the default interpolation space, not an opt-in. The competitor norm is to ship sRGB by default and bury OKLCH as a checkbox several clicks deep. We flipped that. Same-hue gradients render identically in both spaces, so defaulting to OKLCH costs nothing on those and rescues every complementary pair.
The Tailwind output emits a full arbitrary-value class rather than splitting into from- / via- / to- directives. Tailwind's named-stop directives interpolate in sRGB and can't express in oklch. Correctness over conventional shape.
The URL state encoding holds the entire gradient. Color stops, angles, and the interpolation space all live in the query string. Copy the address bar, paste it to a teammate, and they see the exact gradient you saw, with no server or account in the loop. A four-stop gradient encodes to about 380 characters, comfortably under the 2,000-character practical browser limit. Eight-stop gradients land around 700 characters and still ride the URL bar without issue. Your last 8 gradients are saved locally in localStorage, never sent anywhere.
What we don't do: we don't interpolate in CIE Lab. Lab's perceptual uniformity breaks down in the blue region, the very part of the gradient most likely to need it, and OKLCH was built to fix that. We also don't surface the longer hue polar modifier yet; it traces the long way around the hue wheel, occasionally useful for animated gradients but rarely what a static gradient wants.
The gray dead zone has been a CSS rendering convention since the first gradient shipped in WebKit in 2008. It doesn't have to be your dead zone.
Frequently Asked Questions
What is the difference between OKLCH and sRGB interpolation?
sRGB interpolation blends two colors by linearly moving through the three-dimensional RGB cube, which seems mathematically reasonable but is perceptually wrong. Straight lines in the RGB cube pass through low-saturation regions, so a blue-to-red gradient drags through a muddy near-gray midpoint before emerging red on the other side. OKLCH stands for Oklab Lightness-Chroma-Hue; it is a perceptually uniform color space published by Bjorn Ottosson in 2020. Interpolating in OKLCH preserves chroma (saturation) and lightness across the transition, so the midpoint stays vivid. CSS Color Module Level 4 supports OKLCH interpolation natively via the 'in oklch' keyword inside linear-gradient and radial-gradient functions.
Does OKLCH work in all browsers?
OKLCH gradient interpolation is supported in Chrome 111+, Safari 16.2+, Firefox 113+, and every Chromium-based browser from 2023 onward (Edge, Arc, Brave, Opera). That covers well over 95% of real-world traffic in 2026. Graduo emits an sRGB fallback gradient alongside the OKLCH version wrapped in @supports, so older browsers still render something reasonable rather than breaking. If you absolutely need uniform rendering on pre-2023 engines, you can export the gradient as a rasterized image — but for any modern web project the CSS native path is fine.
How do I use Graduo's Tailwind output?
Switch the output format to Tailwind and Graduo emits the gradient as an arbitrary-value background class that you paste directly into className. For example: bg-[linear-gradient(135deg,#b8ff00_0%,#ff2d8a_100%)]. Arbitrary values work in Tailwind v3.x without config changes. If you prefer a named utility, copy the CSS output into your theme.extend.backgroundImage config and reference it with bg-my-gradient. Graduo also outputs plain CSS and SCSS variants from the same dropdown — pick whichever matches your build system.
Can I share a gradient via URL?
Yes. Graduo encodes the complete gradient state — all color stops, positions, angle, type (linear/radial/conic), and color space — into the URL query string whenever you make a change. Copy the page URL and paste it to anyone and they will see the exact same gradient. No server, no account, no expiry. This also means you can bookmark gradients you like or keep them in a Notion doc as plain links.
Does Graduo store or transmit my gradients?
No. Everything runs in your browser. The gradient state lives in the URL (client-side) and in localStorage as a rolling 8-entry history of recently copied gradients. Nothing is transmitted to any server. There is no account, no login, and no user identifier. Clearing your browser's site data for appcrib.com wipes the history entirely.
What is the difference between linear, radial, and conic gradients?
Linear gradients transition along a straight axis defined by an angle (0deg = top, 90deg = right, 135deg = bottom-right). They are the workhorse for hero backgrounds, buttons, and section dividers. Radial gradients emanate outward from a focal point and are ideal for spotlights, vignettes, and glows. Conic gradients rotate around a center point like a pie chart or color wheel — use them for circular progress indicators, color pickers, and rotating accents. Graduo supports all three plus repeating variants, and the OKLCH interpolation benefit applies identically to each.
Why does my gradient have visible banding, and how do I fix it?
Banding happens when the color transition spans a small range and the 8-bit sRGB output pipeline cannot represent enough intermediate steps, so discrete stripes appear instead of a smooth ramp. The fixes are: increase the chromatic distance between stops so the banding becomes imperceptible; switch interpolation to OKLCH, which distributes perceptual steps more evenly; add a subtle noise or dither overlay (one line of CSS with a semi-transparent noise PNG); or export at higher bit depth for print. Graduo's OKLCH mode eliminates most software-side banding, though it cannot fix banding introduced by the display panel itself.
Privacy
Graduo runs entirely in your browser. Gradient state lives in the URL and in localStorage as a rolling 8-entry history. Nothing is transmitted to any server. See our Privacy Policy for details.