CSS Gradient Generator
Pick linear or radial, set the angle and colours, see a live preview, and copy the CSS. Free, no sign-up.
Linear vs radial
A linear-gradient() blends colours along a straight line — the angle controls its
direction (0° is bottom-to-top, 90° is left-to-right). A radial-gradient()
blends outward from the centre in a circle. Both are pure CSS, so they stay crisp at any size and
add no extra page weight.
Frequently asked questions
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colours, rendered by the browser with no image file. Linear gradients run along a line at a chosen angle; radial gradients spread out from a centre point.
How do I use this generator?
Pick linear or radial, set the angle and the two colours, and copy the generated CSS into your stylesheet as the background of any element.
Are CSS gradients better than image backgrounds?
Usually yes — they are resolution-independent, add zero network requests, and scale to any size without blurring. That makes pages faster and sharper on every screen.
Is this tool free?
Yes — it runs in your browser, is free, and needs no sign-up.