CSS Gradient Generator
Design a linear or radial gradient with up to five colors, preview it live and copy the CSS straight into your stylesheet.
How to create a CSS gradient
- Choose Linear or Radial. For a linear gradient, set the angle; for a radial one, pick a shape and center.
- Pick two to five colors. Drag each color’s position slider, or use Add color, Reverse and Random.
- Check the live preview, then click Copy CSS and paste it into your stylesheet.
Features
2 to 5 color stops
Add colors, move their positions and remove them again.
Live preview
See every change on a large preview instantly.
One-click CSS
Copy clean CSS with a solid-color fallback line.
Private
Everything runs in your browser; nothing is sent anywhere.
Using CSS gradients in your design
A CSS gradient is an image the browser draws for you, so it needs no file download and scales to any size without losing quality. You can use it anywhere an image is allowed, most often as the background of a page, hero section, card or button. Because it is code, a gradient loads instantly and keeps your page fast.
A linear gradient blends colors along a straight line. The angle sets the direction: 90° runs left to right, 180° runs top to bottom and 45° runs diagonally. A radial gradient blends colors outward from a point, as a circle or an ellipse, which works well for glows and spotlights. Each color stop has a position from 0% to 100% that controls where that color is strongest.
For smooth gradients, choose colors that are close in hue or brightness, and avoid grey in the middle of two bright colors, which can look dull. The generated code first sets a plain color as a fallback for very old browsers and then the gradient. You can paste the result into any stylesheet, framework or website builder that accepts custom CSS.
Frequently asked questions
How do I use the generated CSS?
Click Copy CSS and paste it into a rule in your stylesheet, for example inside .hero { }. It sets a fallback background color first and then the gradient.
What is the difference between linear and radial gradients?
A linear gradient changes color along a straight line at an angle you choose. A radial gradient changes color outward from a center point in a circle or ellipse.
How many colors can I use?
Between two and five color stops. You can drag each stop’s position to control how the colors blend.
Do CSS gradients work in all browsers?
Yes. The standard linear-gradient and radial-gradient syntax works in every modern browser, including Chrome, Firefox, Safari and Edge, on desktop and mobile.
Can I use a gradient as text or button color?
Yes. Use it as the background of a button, or with background-clip: text for gradient text. Only the gradient value itself is generated here.