90°
Blend in
Picker
0%
Picker
100%

Presets

background: linear-gradient(90deg, rgba(99, 102, 241, 1) 0%, rgba(236, 72, 153, 1) 100%);

CSS gradient generator

Pick your colours in any CSS form, drag the stops along the bar (click it to add one), and choose linear, radial or conic — the gradient updates live and the CSS is ready to copy. Set the angle, a radial shape and position, blend in OKLab or OKLCH for smoother colour, make it repeating, stack layers, start from a preset or a random gradient, and download it as SVG or PNG.

Everything runs in your browser, so there's no upload and no account — just build the gradient and paste the code into your stylesheet.

Need another effect? See all CSS generators.

More CSS generators

CSS Box Shadow Generator

Layer offset, blur, spread, color & inset shadows.

CSS Border Radius Generator

Round each corner independently in px, % or em.

Glassmorphism CSS Generator

Frosted-glass blur, transparency & border.

CSS Text Shadow Generator

Offset, blur, color — glow & layered text effects.

CSS Cubic Bezier Generator

Drag the curve to design custom easing.

CSS Gradient Generator — frequently asked questions

How do I make a CSS gradient?
Choose a type (linear, radial or conic), add colour stops by clicking the bar or the button and drag them into place, then adjust the angle. Copy the generated background value into your CSS, as a plain declaration, a Tailwind class, a CSS variable, an SCSS variable or a full rule; the address bar holds a link to the design.
What's the difference between linear, radial and conic gradients?
A linear gradient blends along a straight line at the angle you set; a radial gradient blends outward from the center in a circle; a conic gradient sweeps the colors around a center point like a color wheel.
Is anything uploaded?
No. The CSS is generated live in your browser with JavaScript — nothing is sent to a server, there's no sign-up, and it's free.

Spotted a bug or have a suggestion?

Found something broken, have an idea, or just want to say thanks about any of our tools? Every message reaches a real person.