CSS gradient generator

CSS gradients create smooth transitions between colours without image files, so they load instantly and scale perfectly. This generator supports all three gradient types and gives you precise control over colour stops, positions and angles, with a live preview and ready-to-paste CSS.

How to use it

1. Choose linear, radial or conic.
2. Add, remove and move colour stops, and pick their colours.
3. Set the angle for linear and conic gradients, or the shape and position for radial ones.
4. Copy the background declaration.

The three types

• Linear: colours change along a straight line. linear-gradient(90deg, #06B6D4, #3B82F6) goes left to right.
• Radial: colours spread from a centre point. radial-gradient(circle at center, #FDE68A, #F59E0B).
• Conic: colours rotate around a centre, like a colour wheel or pie chart. conic-gradient(#EF4444 0 25%, #22C55E 0 60%, #3B82F6 0) draws a three-segment pie.

Colour stops

Each stop can have a position: linear-gradient(#000 0%, #000 50%, #fff 50%) creates a hard edge at the middle because two stops share the same position. This is how stripes and progress bars are drawn with pure CSS. Use repeating-linear-gradient for patterns.

Tips

• Angles: 0deg points up, 90deg points right, 180deg points down.
• Use in oklch interpolation in modern browsers, as in linear-gradient(in oklch, blue, yellow), to avoid dull grey midpoints.
• Layer several gradients separated by commas for mesh-like backgrounds.