Omnibus
Color
Color
CSS
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);

CSS gradient generator

Pick your colors, drag the stops, and choose linear, radial or conic — the gradient updates live and the CSS is ready to copy. Add as many color stops as you like and set the angle for linear and conic gradients.

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 color stops and set each one's color and position, then adjust the angle. Copy the generated background value into your CSS.
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. A single unobtrusive ad slot covers hosting.

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.