Why do some gradients look banded in the preview?

Browsers interpolate gradients in sRGB by default, which produces a gray band between complementary hues. Use fewer, more contrasting stops — or try the "in oklch" color-space modifier in a modern browser — to avoid the band.

Can I make a hard-stop gradient?

Yes. Place two stops of different colors at the same position (for example red at 50% and blue at 50%) and the gradient will switch instantly instead of blending.

What is a conic gradient good for?

Conic gradients rotate hue around a center point, which is ideal for pie charts, color wheels, checkerboards (with four hard stops), and loading spinners.

Gradient Generator

Build linear, radial, and conic CSS gradients with multiple color stops and real-time preview.

Gradient Type

Angle

deg

Color Stops

Stop 1

H239

S84

L67

Position0%

Stop 2

H330

S81

L60

Position100%

Preview◇

CSS

background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);

3 · See also

01·COL

Color Palette Generator

Generate complementary, analogous, triadic, and more color harmonies from any base color. Export as CSS variables, Tailwind config, SCSS, or JSON.

02·CSS

Box Shadow Generator

Layer multiple box shadows with full control over offset, blur, spread, color, and inset. Copy the CSS instantly.

02·CSS

Clip-Path Maker

Draw custom clip-path polygons with an interactive editor, or start from presets like triangles, hexagons, and arrows.

Runs entirely in your browser.

Every color, gradient and CSS output is generated on this page. Nothing is uploaded, logged or shared.

Gradient Generator

Related Tools