CSS Gradient Generator
Set your color stops and angle, and the gradient CSS is ready to copy.
Your text and files never leave your browser — nothing is sent to a server.
Click an empty spot on the bar to add a stop, or drag a handle to move it.
The background-color line is an average color for environments that can’t draw gradients.
How to use
- Choose a type — linear, radial or conic — and set the angle or center position.
- Add stops by clicking the bar or pressing “Add stop”. Drag a handle or type a percentage to move a stop.
- Set each stop’s color with the color box, or type a code like #rrggbbaa to include transparency.
- Copy the CSS code and paste it into your stylesheet. Press “Random” to explore new combinations.
FAQ
What is the difference between linear, radial and conic?
Linear blends colors along a straight line, radial spreads them outward from a center point, and conic sweeps them clockwise around the center. Conic works well for pie charts and color wheels.
Which direction is 0deg?
In linear-gradient, 0deg runs from bottom to top and 90deg from left to right. A conic gradient starts at 0deg, the 12 o’clock position.
Do gradients work in older browsers?
Linear and radial gradients work in virtually every browser, and conic gradients in browsers from 2020 onward. Where a gradient can’t be drawn, the background-color fallback shows instead.
Related tools
All tools
Unit Converters
- Unit Converter
- Temperature Converter
- Weight Converter
- Area Converter
- Length Converter
- Angle Converter
- Calorie Converter
- Data Size Converter
- Dry Volume Converter
- Electric Charge Converter
- Energy Converter
- Flow Rate Converter
- Force Converter
- Fuel Economy Converter
- Luminous Intensity Converter
- Magnetomotive Force Converter
- Power Converter
- Pressure Converter
- Radiation Dose Converter
- Speed Converter
- Time Unit Converter
- Volume Converter