How to generate a CSS gradient
Hand-writing gradient syntax is fiddly. Here's how to design one visually and copy the exact CSS.
Steps
- Open the CSS gradient generator.
- Choose linear or radial and add color stops.
- Adjust the angle and stop positions in the live preview.
- Copy the generated CSS into your stylesheet.
Linear vs radial
Linear gradients blend along a straight line at an angle you set — great for buttons and backgrounds. Radial gradients blend outward from a center point, useful for spotlights and glows.
Tools used in this guide
Related guides
How to generate a CSS gradient — FAQ
Use the visual generator to pick colors, stops and direction, then copy the ready-to-paste CSS.