Filuni

CSS Gradient Generator

Build CSS linear / radial gradients visually and copy the code.

90°
0%
100%
CSS
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
Private & SecureRuns in your browser — nothing is uploaded
Easy to UseJust paste or type — instant results
Free ForeverUnlimited use, no sign-up
Fast & ReliableAdvanced tech, fast and stable

A CSS gradient is easy to picture but tedious to write by hand, with stops, angles and the right syntax. Set your colours visually and get clean linear or radial gradient code to paste straight into your stylesheet.

Colours → CSS gradient

How to use: CSS Gradient Generator

  1. 1Enter inputChoose the gradient type: linear or radial.
  2. 2Set optionsSet the color and position of each stop, and add more stops as needed.
  3. 3ProcessAdjust the angle for linear gradients and watch the live preview.
  4. 4Get resultClick "Copy CSS" to grab ready-to-use gradient code.

Common use cases

Build a backgroundDesign a linear or radial gradient and copy the CSS.
Tune the stopsDrag colour stops to control where each shade sits.
Switch directionSet an angle for a linear gradient or a centre for a radial one.
Reuse a gradientCopy the code once and paste it across your project.

Good to know

Linear and radial differA linear gradient runs along a line at an angle; a radial one spreads from a centre point. Pick the one that matches the shape you want.
Stops control the blendWhere you place each colour stop decides how quickly one shade becomes the next. Closer stops make a sharper transition.
Prefixes are rarely needed nowModern browsers support unprefixed gradient syntax, so the old vendor prefixes are usually unnecessary. Add them only for very old targets.
Watch for bandingSmooth gradients can show visible bands on some screens, especially over a long, subtle fade. A little noise or a shorter range helps.

Frequently Asked Questions