CSS Gradient Generator: Linear, Radial and Conic
Design linear, radial and conic gradients and copy the CSS.
Use via API
Build a CSS linear, radial or conic gradient (optionally repeating) from colour stops. Colours are validated and written as hex. Send JSON, get JSON back.
POST https://pithlab.com/api/v1/tools/css-gradient-generator
curl https://pithlab.com/api/v1/tools/css-gradient-generator \
-H "Authorization: Bearer $PITHLAB_KEY" \
-H "Content-Type: application/json" \
-d '{"stops":"#0ea5e9 0%, #8b5cf6 100%","type":"linear","angle":135}'About the CSS Gradient Generator
Create linear, radial and conic CSS gradients with multiple colour stops, angles and positions. Preview live and copy clean, standards-compliant CSS.
How to use the CSS Gradient Generator
- Choose a linear, radial or conic gradient.
- Set the angle (linear and conic) or the shape and centre (radial and conic).
- Edit the colour stops: pick colours, set each stop's position, and add or remove stops.
- Check the live preview, then copy the CSS into your stylesheet.
Examples
Input
linear, 90°, #0ea5e9 at 0%, #8b5cf6 at 100%
Output
background: linear-gradient(90deg, #0ea5e9 0%, #8b5cf6 100%);
Input
radial circle at 50% 50%, #ffffff at 0%, #1e293b at 70%
Output
background: radial-gradient(circle at 50% 50%, #ffffff 0%, #1e293b 70%);
Input
conic from 0° at 50% 50%, #f00 at 0%, #0f0 at 33.33%, #00f at 66.67%, #f00 at 100%
Output
background: conic-gradient(from 0deg at 50% 50%, #ff0000 0%, #00ff00 33.33%, #0000ff 66.67%, #ff0000 100%);
Frequently asked questions
Which browsers support these gradients?
Unprefixed linear-gradient() and radial-gradient() work in every current browser. conic-gradient() is supported in all current versions of Chrome, Edge, Firefox and Safari.
How do gradient angles work in CSS?
0deg points up (to top), 90deg points right, 180deg points down and 270deg points left. The gradient starts on the opposite side and runs in that direction.
How do I get a hard edge instead of a blend?
Give two neighbouring stops the same position, for example #f00 50% and #00f 50%. The colour switches instantly at that point.
What does repeating do?
repeating-linear-gradient() and its radial and conic versions tile the stops. If the last stop is at 20%, the pattern repeats five times across the element, which is useful for stripes.