Gradients add depth to backgrounds and buttons. Pick two colours, choose a linear or radial style and angle, and this tool gives you the exact CSS to paste into your stylesheet.
It runs in your browser with a live preview.
How to use the CSS Gradient Generator
- Pick your two colours.
- Choose linear or radial and the angle.
- Copy the generated CSS.
Build CSS gradients visually
A CSS gradient is a background that blends between colours, written as linear-gradient with an angle and colour stops, or radial-gradient spreading from a centre. Writing the syntax by hand means guessing angles and stop positions; the generator lets you pick colours and drag the direction, then hands you the exact CSS to paste into your stylesheet.
Gradients that look professional
The difference between a dated gradient and a modern one is usually restraint: two or three related colours, a subtle angle like 135 degrees, and stops that give the blend room to breathe. Gradients render at any size with zero image weight, which makes them a free replacement for background images on heroes, buttons and cards, with no loading cost at all.
Common uses
- Hero sections and page backgrounds without image files
- Button and card styling with depth
- Brand-coloured overlays on photos
- Matching a design mockup's gradient exactly in code
Frequently asked questions
Is it free?
Yes, free with no signup.
Does it show a live preview?
Yes. The preview updates as you change colours and angle.
Linear and radial both supported?
Yes, you can switch between them.
Can I copy the CSS?
Yes. The ready-to-use CSS is one click to copy.