Gradient Generator
Create beautiful CSS gradients with live preview.
background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);How to use this tool
- Choose between linear or radial gradient type.
- Adjust the angle (for linear gradients).
- Click on color pickers to change colors.
- Adjust position sliders to control color stops.
- Add more colors with the '+' button.
- Copy the CSS code to use in your project.
About this tool
Gradient Generator is an online, free tool that creates CSS gradients for use in web design. No registration required! Linear gradients transition colors along a straight line at any angle. Radial gradients radiate colors from a center point. Gradients are widely supported and can replace images for backgrounds, saving bandwidth and improving performance. They're perfect for buttons, headers, and decorative elements.
Frequently asked questions
How do I create a CSS gradient?
Choose linear or radial, set your colours and their stop positions, adjust the angle if it is linear, then copy the generated CSS and paste it into your background property.
What is the difference between a linear and a radial gradient?
A linear gradient moves colour along a straight line at whatever angle you set, which suits banners, buttons and full-width sections. A radial gradient spreads outward from a point, which reads as a glow or a spotlight and works well behind a focal element.
What do the angles mean?
In CSS, 0 degrees runs bottom to top and the angle increases clockwise, so 90 degrees runs left to right and 180 degrees runs top to bottom. That is a quarter turn away from the mathematical convention, which is why gradients often come out rotated the first time.
Why does my gradient look muddy in the middle?
Because interpolating between two strongly opposed hues passes through grey. Blue to orange goes through a dull brown at the midpoint. Add a third stop in the middle to steer the transition somewhere you actually want, or choose two colours nearer each other on the wheel.
Are CSS gradients better than a background image?
Usually. A gradient is a few dozen bytes of text rather than a file to download, it scales to any size without becoming blurry, it costs no extra request, and it can be changed without re-exporting anything. An image only wins when you need texture or detail a gradient cannot describe.
Do gradients work in every browser?
Linear and radial gradients have been supported without prefixes for well over a decade, so anything in current use handles them. Newer additions such as conic gradients and colour interpolation hints have narrower support and are worth checking if you use them.