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 Tools · See Also

01·COL
Color Palette Generator
accent · #FF006E
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
accent · #555A6B
Layer multiple box shadows with full control over offset, blur, spread, color, and inset. Copy the CSS instantly.
02·CSS
Clip-Path Maker
accent · #0EA5E9
Draw custom clip-path polygons with an interactive editor, or start from presets like triangles, hexagons, and arrows.

✱ Privacy◇

Runs in your browser.

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

Local-only

Gradient Generator

Related Tools