---
title: "CSS Gradient Generator – Linear, Radial & Conic | CSS Orbit"
description: "Make linear, radial and conic CSS gradients with draggable colour stops, layers and OKLCH blending. Copy the CSS with a fallback, or a Tailwind class."
url: https://cssorbit.me/
---

Gradient generator Linear · radial · conic

# CSS gradient generator

Drag colour stops, stack layers and blend in OKLCH, then copy clean CSS or a Tailwind class.

## More CSS tools

Seven more generators and calculators, all running in your browser.

- [Box shadow generator](https://cssorbit.me/box-shadow-generator/): Stack shadow layers, use elevation presets and preview on light and dark surfaces.
- [Border radius generator](https://cssorbit.me/border-radius-generator/): Drag eight handles into organic blob shapes and copy the shortest shorthand.
- [Clamp calculator](https://cssorbit.me/clamp-calculator/): Fluid font sizes and spacing with clamp(), the maths shown, plus a fluid type scale.
- [Cubic bezier generator](https://cssorbit.me/cubic-bezier-generator/): Drag an easing curve, use steps(), and race two curves side by side.
- [CSS color converter](https://cssorbit.me/css-color-converter/): HEX, RGB, HSL, OKLCH and more, with gamut warnings, WCAG contrast and color-mix().
- [PX to REM converter](https://cssorbit.me/px-to-rem-converter/): A two-way table, and a whole stylesheet converted without touching url() or comments.
- [Specificity calculator](https://cssorbit.me/css-specificity-calculator/): (a, b, c) for every selector, including :is(), :where(), :has() and :nth-child(of S).
- [Stays on your device](https://cssorbit.me/privacy/): Every tool runs in this tab. Nothing you make, paste or open is uploaded.

## Recommended

Two free services that help with the parts of front-end work a static page cannot do.

Disposable cloud browser

### WebTraceCheck

Check how your gradients, shadows and fluid type render outside your usual browser. WebTraceCheck opens Chrome, Firefox, Edge, Brave or Chromium on an isolated Linux desktop that is deleted after each session, with free daily time and nothing to install.

It also has free tools such as a website audit and a technical SEO check.

[Try a cloud browser](https://webtracecheck.com/)

Temporary email

### CleanTempMail

Styling a sign-up form? Test its confirmation email with a disposable inbox instead of your own address. CleanTempMail gives you an instant temporary inbox with no sign-up, a random or custom address on hundreds of domains, and deletes messages automatically after 3 days.

For automated tests there is a Temp Mail API, paid once per request quota with no subscription.

[Open a temporary inbox](https://cleantempmail.com/)

## Gradient questions

**What does “blend colours in OKLCH” change?**

By default browsers mix gradient colours in sRGB, which can turn the middle of a gradient grey or muddy (blue to yellow is the classic case). Adding `in oklch` or `in oklab` makes the blend perceptually even, so the midpoint stays bright. OKLCH also lets you pick the hue path: shorter, longer, increasing or decreasing around the colour wheel.

**Why does the CSS have two background-image lines?**

When you pick a colour space, the first declaration is a plain fallback without the `in` keyword, using hex and rgba() colours plus extra stops that approximate the blend. Browsers that do not understand gradient colour spaces keep that line and ignore the second; current browsers use the second.

**How do layered gradients work?**

background-image accepts a comma-separated list, and the first layer is painted on top. Give upper layers transparent stops (for example a radial glow that fades to transparent) so the layers below show through. The preview's checkerboard shows any area that is transparent all the way down.

**How do I use the Tailwind class?**

Paste it into an element's class list. It is an arbitrary value, bg-[…], with spaces written as underscores, which Tailwind turns back into spaces when it generates the CSS. It needs no configuration.

**Is anything I make uploaded?**

No. The generator runs in your browser and nothing you enter is sent anywhere. The site counts page views with Cloudflare Web Analytics, which uses no cookies or cross-site tracking and never receives what you type or paste into the tools.