CSS Gradient Generator
Build a linear gradient and copy the CSS.
Keep or share the finished result
Copy or share after running the tool. Saved tools and settings stay in this browser.
What would you like to do next?
Generate a CSS gradient
Choose two colors and a direction above to preview a linear gradient live, then copy the ready-to-use CSS with one click. Gradients add depth to backgrounds, buttons and headers, and this gives you clean code you can paste straight into a stylesheet. Everything runs in your browser.
The CSS you get
The output is a background using the linear-gradient function, with your two colors and chosen angle filled in.
Frequently asked questions
What CSS does it produce?
It gives a background property using the CSS linear-gradient function with your two colors and the direction you picked.
Can I change the direction?
Yes. Choose from common directions like left to right, top to bottom or diagonal, and the preview updates instantly.