How to write a CSS gradient in seconds
A gradient can make a plain background feel finished without any image file. This guide shows how the angle and colour stops change the result.
What is the CSS Gradient Generator?
Pick two colours, an angle and a gradient style, and this tool writes the exact CSS you can paste into a stylesheet. It only builds the gradient string, so it does not change your site or upload anything.
How to use it
- Enter your two colours and an angle.
- Choose linear or radial.
- Copy the CSS shown in the results.
Worked example
A 135-degree linear gradient from #FF5733 to #33A1FF, with ready-to-paste CSS.
What does a CSS gradient do?
It blends two or more colours smoothly across an element, using only CSS, so the page stays light and fast.
Frequently asked questions
Does this save the gradient anywhere?
No, it only shows the CSS text for you to copy.
Can I use any hex colours?
Yes, any valid six-digit hex colour works.