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%);

Color Palette GeneratorGenerate complementary, analogous, triadic, and more color harmonies from any base color. Export as CSS variables, Tailwind config, SCSS, or JSON.
Box Shadow GeneratorLayer multiple box shadows with full control over offset, blur, spread, color, and inset. Copy the CSS instantly.
Clip-Path MakerDraw custom clip-path polygons with an interactive editor, or start from presets like triangles, hexagons, and arrows.

Gradient Generator

Related tools