How to make a CSS gradient
- Choose a type and set the angle.
- Pick colors and move the stops.
- Copy the CSS.
About this tool
Design a gradient and watch it update as you change it. Choose linear, radial or conic, set the angle or center, and add as many color stops as you need, each with its own position. Start from a preset or make your own, then copy the CSS. You can also turn on repeating gradients for stripes and patterns.
Common questions
How many colors can I use?
Up to eight color stops, each placed anywhere from 0 to 100 percent.
Will the CSS work in all browsers?
Linear, radial and conic gradients work in current versions of all major browsers. Check older browsers if you need them.
How do I make hard stripes?
Add two stops at the same position with different colors, and turn on repeating.
Is it free to use?
Yes. There's no sign-up, and you can use it as often as you like.
Is my text uploaded anywhere?
No. This tool runs inside your browser, so what you enter stays on your device.
Do I need to install anything?
No. It works in your browser on a computer or a phone.