CSS Gradient Generator Tool: Linear, Radial & Conic [2026]

CSS gradients have quietly become the default web background since flat design fell out of fashion around 2018. They show up on every modern SaaS hero, the corner of every productivity-app card, behind every “premium tier” callout. Building one by hand requires remembering whether 0deg is up or right, the syntax difference between radial-gradient and conic-gradient, and the perceptual-colour quirks that make a gradient look muddy in the middle. A generator tool does all that for you with a live preview.

Our CSS gradient generator lets you switch between linear, radial, and conic types, drag colour stops to any position, set the angle, and copy the result as either vanilla CSS or a Tailwind arbitrary-value class. This guide explains when each gradient type is appropriate, the modern OKLCH interpolation feature most generators don’t expose, the banding that ruins amateur gradients, and the framework-specific quirks worth knowing.

The three gradient types and when each is the right choice

CSS supports exactly three gradient functions. Each has a distinct visual signature; matching the type to the use case is the difference between a gradient that reads as intentional and one that reads as random.

The most common mismatch: using a linear gradient where a radial would read better. A button styled with a flat top-to-bottom linear gradient looks dated (it’s the 2010 web aesthetic). The same button with a subtle radial gradient — bright centre fading darker at the edges — looks 3D and intentional. When in doubt for any contained element under ~600px wide, try radial first.

The minimal CSS for each type:

/* Linear: 135 degrees from bottom-left to top-right */
background: linear-gradient(135deg, #635BFF 0%, #00D4FF 50%, #FF80B5 100%);

/* Radial: a circle from the centre, fading outward */
background: radial-gradient(circle at center, #4ADE80 0%, #22D3EE 50%, #A78BFA 100%);

/* Conic: starting at 0deg from top, sweeping clockwise */
background: conic-gradient(from 0deg at 50% 50%,
  #8B5CF6 0%, #06B6D4 33%, #F59E0B 66%, #EC4899 100%);

The angle convention for linear-gradient is the source of more confusion than any other gradient quirk. 0deg points up, 90deg points right, 180deg points down, 270deg points left. This is opposite to mathematical convention (where 0deg points right) and opposite to SVG (where 0deg also points right). 135deg, the most popular angle in modern web design, points from bottom-left to top-right.

Colour stops — the difference between elegant and muddy

A gradient is fully described by a list of colour stops. The simplest gradient has two: linear-gradient(red, blue). Three or four stops give the curved colour transitions you see on premium SaaS hero sections. More than five stops usually produces visual noise rather than richness.

• Two stops: the classic web look. Works for buttons, simple backgrounds, hover states. Choose two colours far apart on the colour wheel for maximum impact, or two close ones for subtle.
• Three stops at 0%/50%/100%: the “premium” look. The middle colour controls the perceived hue of the transition. Most modern SaaS hero gradients use this pattern.
• Four+ stops: aurora-style effects, retro 80s synthwave gradients, holographic backgrounds. Risk: too much colour noise unless the stops are chosen with intent.
• Hard stops (two colours at the same position): creates a sharp edge instead of a gradient. linear-gradient(red 0%, red 50%, blue 50%, blue 100%) produces a 50/50 split. Useful for stripes, split backgrounds, percentage-bar visuals.

The middle-stop trick: when a gradient between two colours looks muddy in the middle (for example, blue-to-yellow producing dirty green-grey), add a third stop at 50% with a colour pulled from the actual rainbow path between them. Blue → cyan → yellow looks vibrant; blue → yellow alone looks washed out. The OKLCH interpolation method (covered next) solves this automatically, but the explicit middle-stop is the universal fix.

OKLCH interpolation — the modern fix for muddy gradients

By default, browsers interpolate between gradient stops in the sRGB colour space — the same colour space CSS has used since 1996. sRGB is mathematically convenient but perceptually broken: equal numerical steps in sRGB don’t produce equal visual changes. The result is the muddy mid-points you see when a default linear gradient passes through a colour-wheel diagonal.

Modern CSS (Chrome 111+, Safari 16.4+, Firefox 113+) supports specifying the interpolation colour space directly. OKLCH and Oklab are perceptually uniform — equal numerical steps look like equal visual changes. The same gradient interpolated in OKLCH versus sRGB looks dramatically different through the middle.

/* Default sRGB interpolation (potentially muddy mid-points) */
background: linear-gradient(135deg, #0077B6 0%, #FFD93D 100%);

/* OKLCH interpolation — vibrant, no muddy middle */
background: linear-gradient(in oklch, 135deg, #0077B6 0%, #FFD93D 100%);

/* Force the longer way around the colour wheel for hue rotation */
background: linear-gradient(in oklch longer hue, 135deg, #0077B6 0%, #FFD93D 100%);

The longer hue modifier is the dramatic one. By default, CSS picks the shorter rotation through the colour wheel between two stops. Forcing longer hue sweeps the long way around — perfect for rainbow hero backgrounds and synthwave aesthetics. Try it once and the visual difference is striking.

Browser support caveat: ~93% global support as of 2026. Older Safari (pre-16.4, before March 2023) and older Edge will fall back to default sRGB interpolation, which means slightly muddier gradients but no broken layout. For production safety, design your gradients to look acceptable in both modes — a hue gap of less than 90° around the wheel keeps both renderings reasonably close.

Banding — the subtle quality killer

Gradient banding is the visible “stripes” of colour you sometimes see across a smooth gradient — most obvious on darker, lower-saturation gradients displayed on phone screens. It happens because 8-bit colour (the standard sRGB pixel format) only has 256 levels per channel. Across a 1920-pixel-wide gradient transitioning between two close shades, that’s only ~256 distinct colours stretched over 1920 pixels — not enough to look smooth.

• Cause #1: low-contrast gradient on a wide area. A gradient from #0a2540 to #0c2a48 across a 1920-pixel hero will band visibly. Either widen the colour range or break up the gradient with subtle noise.
• Cause #2: 8-bit colour rendering on devices that support 10-bit. Modern Macs, iPhones, and Android flagships have 10-bit display pipelines, but CSS still produces 8-bit output unless you specify color-profile: display-p3 or use Display P3 colour functions.
• Fix #1: add subtle noise. A 50% opacity 1×1px PNG noise texture overlaid on the gradient hides banding completely. SVG <filter feTurbulence> works too.
• Fix #2: use Display P3 colours. color(display-p3 0.5 0.4 1) instead of #7e66ff gives the GPU more precision to work with on capable displays.
• Fix #3: reduce the gradient’s pixel area. A 600px gradient bands less than a 1920px gradient at the same colour range, because there are more colour levels per pixel of distance.

How to use the browser tool

1. Open the CSS gradient generator
2. Pick a gradient type — Linear, Radial, or Conic — at the top
3. Adjust the angle slider (linear, conic) — direction the gradient flows
4. Click any colour stop to edit its colour. Drag the position handle to slide the stop along the gradient
5. Use the + button to add a stop, the trash icon to remove one (minimum two stops required)
6. Try a preset — Accent Pop, Sunset, Ocean, Aurora, Peach, or Cosmic — for inspiration or a starting point
7. Click Copy CSS for vanilla CSS, or Copy Tailwind for the arbitrary-value class string