CSS Gradient Generator
Pick a start and end colour and get a CSS linear-gradient declaration you can paste straight into a stylesheet, with a live preview as you adjust.
Free, no signupRuns entirely in your browser
Input
Result
background: linear-gradient(135deg, #f43f5e, #eab308);
About
What the CSS Gradient Generator does
Gradients render entirely in the browser, so they cost nothing in bandwidth — a gradient background is effectively free where a background image would be tens or hundreds of kilobytes. They also scale to any viewport size without blurring.
How it works
Using the CSS Gradient Generator
- 1Choose the starting colour.
- 2Choose the ending colour.
- 3The gradient is assembled at a 135-degree diagonal by default.
- 4A live preview shows the result.
- 5Copy the CSS declaration.
Use cases
What people use it for
- Creating a hero section background
- Styling a call-to-action button
- Adding a subtle background wash to a card
- Building an overlay to improve text legibility over a photo
FAQ
Frequently asked questions
6 related
All tools →