How do you use this tool?
- Pick linear, radial, or conic and set the angle.
- Edit colour stops — hex, RGB, position. Use the hard-stop button for sharp bands.
- Copy the output as plain CSS, a Tailwind v4 utility, an inline style, an SCSS mixin, or inline SVG.
What does the gradient generator do?
The generator builds CSS gradients visually. Choose between linear, radial, and conic types, place colour stops at any position, and pick the interpolation colour space. The live preview renders two rectangles side by side — one in the chosen space, one in sRGB for reference. You see immediately whether a gradient in OKLCH actually travels more cleanly than in sRGB.
Output comes in five formats: plain CSS for classic stylesheets, a Tailwind v4 utility class with the correct colour-space modifier, an inline style attribute, an SCSS mixin, and an inline SVG snippet for email templates. Every format is generated entirely in the browser — no build tool, no server roundtrip.
Why does colour space matter for gradients?
When the browser blends between two colours, it computes a sequence of intermediate values. In sRGB those intermediates often turn grey or brownish between strongly complementary colours — blue and yellow are the classic example. The reason is simple: sRGB is not perceptually uniform. Equal numeric distances do not look equal to the human eye.
OKLCH (Oklab in polar form, defined in CSS Color Module Level 4) addresses that flaw. Lightness (L) and chroma (C) are calibrated so that perceived saturation stays constant across the transition. OKLab encodes the same space in Cartesian form. HSL feels uniform at a glance but breaks in the dark and bright extremes.
How does the side-by-side preview work?
Both preview rectangles use exactly the same stops and angle — the only difference is the value passed to linear-gradient(in <space>, …). The left rectangle uses your chosen interpolation space (default: OKLCH); the right uses sRGB as the reference. When the stops share a hue range the rectangles look nearly identical. Pair complementary hues and the sRGB version develops the muddy mid-zone while OKLCH keeps the chroma.
| Colour space | Strength | Weakness |
|---|---|---|
| OKLCH | perceptually uniform, hue-stable | slightly more verbose |
| OKLab | same space, Cartesian form | no dedicated longer hue mode |
| sRGB | universal, older browsers | grey dead zone on complementary blends |
| HSL | intuitive knobs (Hue / Sat / Light) | breaks at extreme brightness |
How do you use Tailwind v4 gradients correctly?
Tailwind v4 ships an expanded gradient API compared to v3. The directional utility is now bg-linear-to-r (replacing bg-gradient-to-r), and there are bg-radial, bg-radial-[<position>], plus bg-conic and bg-conic-[<from>]. Colour stops still use from-, via-, and to-. The key change: Tailwind v4 interpolates in OKLab by default — already a perceptually uniform space, which silently fixes around 90% of the “muddy middle” problems.
If you need a different colour space (OKLCH for rainbow effects, sRGB for pixel-perfect compatibility), append a modifier to the directional utility: bg-linear-to-r/oklch, bg-conic/hsl-longer, bg-radial/srgb. That modifier compiles down to linear-gradient(to right in oklch, …) in the final CSS (CSS Images-4 requires the angle and the colour-interpolation method to sit in the same pre-stop segment, space-separated, with only one comma before the stops). The Tailwind v4 output in this tool appends the modifier automatically whenever you choose a space other than sRGB — otherwise you get the direction without an explicit space clause.
What are hard stops and how do you build them?
A hard stop is not a gradient — it is a sharp edge at a single position. You create one by placing two stops at the exact same percentage. The browser has no room to interpolate, so it cuts hard. That pattern unlocks several use cases:
- Striped backgrounds.
linear-gradient(90deg, #FF5733 0%, #FF5733 33%, #FFD166 33%, #FFD166 66%, #7C2D12 66%, #7C2D12 100%)renders three equal bands. - Loading bars. A hard stop between “filled” and “empty” can be animated by updating a custom property.
- Decorative bands. Skeleton loaders or block-colour editorial headers.
The hard-stop button next to every stop duplicates the current entry at the same position. Drag either copy to a new colour and the transition remains sharp.
How does shorter hue differ from longer hue?
In polar colour spaces (OKLCH, HSL), every hue lives on a circle. Between two hue values there are always two routes: the short arc and the long arc. CSS exposes four interpolation methods: shorter hue (default), longer hue, increasing hue (mod 360 ascending), and decreasing hue (mod 360 descending).
For most gradients shorter hue is correct — a blue-to-green transition should not detour through red. Conic gradients that aim to render a rainbow spinner or colour wheel need longer hue, because the short arc only covers a narrow slice. The Hue direction toggle in the tool enables itself automatically once you switch to conic or to a polar space.
What are the common use cases?
Hero backgrounds. A subtle linear blend from off-white to a warm accent gives landing pages depth without distraction. OKLCH preserves saturation across the transition — no grey middle between brand orange and sand.
Card highlights. Radial gradients place a soft glow behind a card — ideal for hover states or attention accents. radial-gradient(circle closest-side, …) keeps the spotlight centred.
Loading spinners. Conic gradients with longer hue and an alpha-fading second stop build loading arcs — full accent to transparent. Animated with CSS rotate() they spin smoothly.
Design-system tokens. The SCSS mixin output packages the gradient as a reusable token. Consumers call @include app-gradient;; swapping the interpolation space updates every consumer silently.
Email templates. Outlook and older Gmail web views often refuse CSS gradients. The inline SVG snippet is universal — SVG <linearGradient> works in every mail client that allows images.
Frequently Asked Questions
How do you create a CSS gradient?
Open the editor in the browser, pick the gradient type (linear, radial, conic), set the angle, and add colour stops. The CSS code generates live as you edit. The copy button drops the snippet into your stylesheet.
What is OKLCH and why is it better than RGB?
OKLCH is a perceptually uniform colour space. Interpolating between two colours skips the muddy grey zone you get in sRGB — the transition stays visibly saturated. The side-by-side preview shows the difference instantly.
How do I use gradients in Tailwind v4?
Tailwind v4 ships bg-linear-to-r, bg-radial, bg-conic and the from-, via-, to- colour helpers. Default interpolation is OKLab — append /oklch or /hsl to the directional utility to pick another space explicitly.
Do CSS gradients work in HTML emails?
Many email clients (Outlook, older Gmail web modes) refuse to render linear-gradient(). This tool emits an inline SVG snippet as a fallback — <linearGradient> in SVG works in nearly every mail client that allows images.
What is a hard stop in a CSS gradient?
Two colour stops at the exact same percentage produce a sharp transition with no blending in between. That’s how you build stripes, loading bands, or block colour backgrounds. The hard-stop button duplicates the selected stop.
What does longer hue mean in a conic gradient?
Polar colour spaces (OKLCH, HSL) offer two paths around the hue wheel: shorter hue and longer hue. Rainbow spinners and colour wheels use longer hue — otherwise the browser takes the short arc and skips most colours.
Does the tool save my gradient palettes?
No. Every input stays in the browser tab — nothing is stored or uploaded. Reloading the page resets the editor. To save a palette, copy the output into your stylesheet or a design token file.
Which browsers support OKLCH?
OKLCH is part of CSS Color Module Level 4 and has shipped in Chrome 111, Firefox 113, and Safari 16.4 (all 2023). Browser coverage is around 95% worldwide. Older engines fall back silently — your hex stop colours still render.
Which colour tools are related?
More tools for CSS authoring and palette work:
- Hex to RGB Converter — translate hex codes into RGB, HSL, and OKLCH.
- Contrast Checker — verify WCAG-AAA contrast between two colours.
- SVG Optimizer — minimise SVG output without losing quality.
- CSS Formatter — beautify raw or minified CSS.
Last updated: