Gradient Generator

Build linear & radial gradients with live preview. Copy CSS.

Type

LinearRadial

Angle: 45°

Color Stops

#ff5e3a%

#ff2d55%

CSS

background: linear-gradient(45deg, #ff5e3a 0%, #ff2d55 100%);

Tailwind (arbitrary value)

bg-[linear-gradient(45deg,_#ff5e3a_0%,_#ff2d55_100%)]

How it works

It outputs a CSS gradient; extremely complex meshes are beyond standard CSS gradients.
Color rendering can vary slightly between displays.

Linear blends colors along a straight axis (great for backgrounds); radial blends outward from a center point (great for glows and spotlights).

Yes, add as many color stops as you like and position each one along the gradient.

No. The gradient CSS is generated live in your browser.