CSS Gradient Generator
Design linear or radial CSS gradients with two or three colours and copy the code.
Result
How to use
- 1
Choose linear or radial and pick two or three colours.
- 2
Drag the angle slider for linear gradients, or tap a preset.
- 3
Copy the CSS and paste it into your stylesheet.
Questions
How do I use the CSS?
Paste the copied lines into any CSS rule, for example a button, header or section. The first line is a solid fallback colour for very old browsers.
What does the angle mean?
0° goes from bottom to top, 90° from left to right, 180° from top to bottom. 135° runs diagonally from the top-left corner.
About this Gradient Generator tool
CSS Gradient Generator — Design linear or radial CSS gradients with two or three colours and copy the code. It is one of 200 free tools on namasivayam.in, made by software engineer Namasivayam Vadivelan for everyday use in India.
Everything is calculated instantly in your browser: nothing you type or upload is sent to any server, there is no sign-up, and it works on mobile and desktop. Choose linear or radial and pick two or three colours.
Related reading
Articles that go with this tool
Colours That Work: Simple Colour Tips for Your Slides, Posters and Websites
You don’t need to be a designer to use colour well. Simple rules for choosing colours, building a palette and making text easy to read — with free tools to help.
How AI Chatbots Actually Work — Explained Simply, Without the Jargon
AI chatbots can write emails, explain code and plan trips. But how do they really work, why do they sometimes confidently get things wrong, and how should you use them wisely?
Passkeys Explained: The Simple, Safer Way to Log In Without Passwords
Google, Apple and Microsoft now let you sign in with passkeys instead of passwords. What a passkey is, why it can’t be phished, and how to set one up in five minutes.
Related tools
More colour tools you may like
Results are estimates to help you plan. They are not financial, tax or medical advice.