CSS Gradient Generator
Build a smooth two-colour CSS gradient and copy its code.
Quick answer: enter your details below and click Generate gradient — your result appears instantly, right here in your browser. Nothing you enter is uploaded or stored.
C
Image & Design
Enter your details below.
How to use
- Enter your two colours and an angle.
- Choose linear or radial.
- Copy the CSS shown in the results.
About this tool
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.
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.