xtract.bot

Apps / CSS Generators / Gradient Generator

CSS Gradient Generator

Linear, radial, and conic gradients in one tool. Add as many colour stops as you need; copy the value when you're done.

Colour stops (2)

Presets
CSS value
background: linear-gradient(90deg, #3b82f6 0%, #a855f7 100%);

What is this?

A free CSS gradient generator with three modes — linear, radial, and conic — in one tool. Build the colour stops, tweak the mode-specific knobs, copy thebackground value.

Which mode does what

  • Linear — colour transitions along an angle (most common; hero panels, button surfaces).
  • Radial — colour transitions outward from a centre point (spotlights, vignettes).
  • Conic — colour transitions around a centre (pie charts, colour wheels, decorative discs).

Repeating gradients

Tick Repeating to turn the gradient into a tileable pattern. With careful stop placement this creates stripes, chevrons, and seamless backgrounds in pure CSS.

FAQ

Stops at the same position?
Place two stops at the same percentage to get a hard colour break (no gradient). Useful for stripes / pie charts. The Pie preset uses this trick.
Why does my radial gradient look stretched?
Switch shape from ellipse to circle. Or pin the size to closest-side /farthest-corner to control how the gradient extends.
oklch / lab colour spaces?
CSS supports oklch interpolation via linear-gradient(in oklch, …) for smoother colour transitions. This tool emits standard sRGB; copy and addin oklch manually if you want it.

Related tools