How do I make a CSS gradient?

Pick the colors from your palette and choose linear, radial, or conic; the tool previews it live and gives you the background-image CSS to copy.

What gradient types are supported?

Linear, radial, and conic gradients, each with adjustable angle or position and multiple color stops.

Why does my gradient look muddy in the middle?

Two colors far apart on the wheel pass through gray in sRGB. Add a mid-stop, or pick closer hues, to keep the transition clean.

Gradient Generator

Generate copyable CSS gradients from your project palette

Angle 135° Soft 42%

Gradient Generate a usable gradient background linear-gradient

Color Stops

Adjust colors and positions for stable gradient results

CSS Output

Ready to use in web projects or design system variables

About CSS Gradient Generator

Generate linear, radial, and conic CSS gradients from your current palette. Adjust color stops and angles with live preview. Copy the CSS gradient code in one click. The gradient preview renders live from your current palette — nudge a stop or the angle and the change shows up immediately.

Handy for quickly generating gradient CSS for a hero section, button, or background — the conic mode is particularly useful for dashboard dials and loading indicators.

Common questions

How do I make a CSS gradient? Pick the colors from your palette and choose linear, radial, or conic; the tool previews it live and gives you the background-image CSS to copy.
What gradient types are supported? Linear, radial, and conic gradients, each with adjustable angle or position and multiple color stops.
Why does my gradient look muddy in the middle? Two colors far apart on the wheel pass through gray in sRGB. Add a mid-stop, or pick closer hues, to keep the transition clean.