Gradient Generator
The CSS Gradient Generator creates linear, radial and conic gradients from two or three colors with a live preview and copy-ready background CSS.
About this tool
The CSS Gradient Generator creates linear, radial and conic gradients from two or three colors with a live preview and copy-ready background CSS.
How to use it
- Choose the gradient type: linear, radial or conic.
- Set the angle with the slider (0–360°).
- Pick two colors, or tick Use 3 colors to add a third.
- Click Copy CSS and paste the background rule into your stylesheet.
Good to know
- linear-gradient() blends colors along a straight line set by an angle, where 90deg runs left to right.
- radial-gradient(circle, …) spreads colors outward from the center.
- conic-gradient(from <angle>, …) sweeps colors around a center point, which is useful for pie charts and color wheels.
- CSS gradients are images rendered by the browser, so they scale to any size without extra file weight.
- All three gradient functions are supported in every current major browser.
Runs entirely in your browser — nothing you enter is uploaded or stored.
Frequently asked questions
How do I make a CSS gradient?
Use a gradient function as a background, for example background: linear-gradient(135deg, #1db954, #0a1628). This tool writes that line for you from the colors and angle you choose.
What is the difference between linear, radial and conic gradients?
Linear gradients change color along a line, radial gradients radiate from a center point, and conic gradients rotate around a center like the hands of a clock.
Can a gradient have more than two colors?
Yes. CSS gradients accept any number of color stops. This generator supports two or three colors; you can add more stops to the copied CSS by hand.
Do CSS gradients slow down a website?
No noticeably. They are drawn by the browser and add no image download, so they are usually lighter than gradient image files.