CSS gradient and box-shadow generator.

Three gradient types, each with any number of colour stops: linear gradients along an angle, radial gradients from a centre point as a circle or ellipse, and conic gradients that sweep around a centre. Stops are dragged on the bar, moved with the arrow keys (Shift for steps of 10) or typed as exact percentages.

The output is a background-image declaration ready to paste, plus a Tailwind arbitrary-value class. A second tab builds layered box shadows with offsets, blur, spread, colour, opacity and inset per layer, previewed on light and dark backgrounds.

The output is standard CSS with no runtime library, so it works in any framework. Most email clients ignore gradients, so for email set a solid background-color as well.

By default, a gradient between hex colours is interpolated in sRGB, mixing the red, green and blue channels in a straight line. Between colours far apart on the colour wheel, such as blue and yellow, the midpoint is a dull grey. OKLab is a perceptual colour space, so steps look even to the eye and the middle stays clean. OKLCH is the same space in polar form (lightness, chroma and hue), so the gradient travels around the hue wheel and keeps its saturation: blue to yellow passes through a bright green instead of grey.

The sRGB and OKLCH strips under the bar show the difference live. Longer hue sends an OKLCH gradient the long way round the wheel, which is how the Hue wheel preset gets a full rainbow from one colour. OKLCH is also how many modern design systems define palettes, because equal steps in lightness look equal.

Support: the in oklch syntax works in Chrome and Edge 111+, Safari 16.2+ and Firefox 127+, so every current major browser has it (Firefox was last, in mid-2024). Older browsers drop a declaration they cannot parse, so the CSS output puts a plain sRGB line first as a fallback.

In linear-gradient, 0deg points up and angles turn clockwise, so 90deg runs left to right and 180deg top to bottom. Radial gradients take a shape and a position: circle at 30% 30% puts a round glow towards the top left. Conic gradients take a start angle and a centre: from 0deg at 50% 50%. The interpolation method sits in the same first argument, for example 90deg in oklch.

Two stops at the same position make a hard edge, which is how CSS stripes and pie charts are drawn. A stop without a position is spaced evenly, but this generator always writes positions so the output is explicit.

Stops are a colour plus a position. A stop can carry two positions to make a flat band (red 20% 40%), and a bare percentage between two stops is a colour hint that moves the midpoint of the blend. Both are valid CSS you can add by hand to the copied output.

Banding, visible steps in what should be a smooth gradient, appears in large areas with subtle changes, especially dark ones. Interpolating in OKLab spreads the steps more evenly to the eye; an extra stop to steer the blend, or a faint noise texture on top, hides the rest.

Transparency used to be a trap: fading to the keyword transparent could pass through grey. Current browsers interpolate with premultiplied alpha, so red to transparent stays red as it fades. To be explicit, fade to the same colour with zero alpha, such as rgb(255 0 0 / 0).

The Tailwind class is an arbitrary value such as bg-[linear-gradient(90deg_in_oklch,#1f5eff_0%,#ffd400_100%)]. Spaces become underscores, which Tailwind turns back into spaces when it generates the CSS. It works in Tailwind v3 and v4 and suits one-off hero backgrounds. Classes are generated at build time, so paste the full class into your markup rather than assembling it from variables at runtime.

For gradients you reuse, Tailwind v4's own utilities are tidier: bg-linear-90, bg-radial and bg-conic with from-, via- and to- colour stops. Tailwind v4 interpolates them in OKLab by default and accepts modifiers such as bg-linear-to-r/oklch. Teams with a design system usually define brand gradients as tokens instead.

A single large shadow tends to look like a smudge. Real objects cast a tight, darker shadow where they touch the surface and a wide, faint one further away, so the Layered preset stacks three shadows of increasing offset and blur with low opacity. Negative spread pulls a large blur in so it does not bleed out to the sides.

Tint shadows with the background's hue instead of pure black, keep the opacity low, and on dark backgrounds rely more on borders and lighter surfaces, because shadows barely show. If you animate elevation, animate the opacity of a pseudo-element that carries the shadow rather than box-shadow itself, which forces a repaint every frame.

Text on a gradient has to pass contrast at its weakest point, not the average. Check the lightest and darkest colour behind the text with our colour contrast checker, or add a solid scrim behind the text. Set a solid background-color under any gradient behind text too, so it stays readable in forced-colours modes and print styles that drop background images. Avoid animating gradients that fill the screen, and respect prefers-reduced-motion if you do animate them.

Gradients are cheap: they render on the GPU, scale to any size and cost no network request, which makes them a good replacement for decorative background images when you are working on Core Web Vitals.