Gliora
Tools

Money

Housing & transport

Life

Tools

Español

CSS gradient generator

CSS gradient generator

This CSS gradient generator lets you build linear and radial gradients visually — pick two colors, a type and an angle — and copy the finished background declaration.

Pick colors, copy the CSS

Choose two colors, select linear or radial, and set the angle for linear gradients. The preview box updates live, and the CSS code below it is ready to copy straight into your stylesheet.

FAQ

What's the difference between linear and radial gradients?
A linear gradient blends colors along a straight line at the angle you set. A radial gradient blends them outward from a center point in a circle, ignoring the angle.
Can I change the gradient angle?
Yes, for linear gradients — set any angle from 0 to 360 degrees. The angle option is hidden for radial gradients, since they don't use one.
How do I use the generated code?
Copy the background: ... line with one click and paste it into your CSS file or a style attribute. It works in every modern browser without prefixes.