๐ CSS Gradient Generator
background: linear-gradient(90deg, #1a3a5c 0%, #4facfe 100%);
Adjust multiple color stops and an angle to generate CSS code for linear-gradient or radial-gradient, with a live preview. Handy for designing buttons or backgrounds.
How to use
- Choose the gradient type (linear or radial).
- For linear gradients, adjust the angle with the slider.
- Adjust each color stop's color and position, then use "Copy" to copy the generated CSS code.
How the calculation works
This tool builds CSS gradient values (linear-gradient and radial-gradient) as you pick colours and positions. Linear: linear-gradient(angle, colour1 position1, colour2 position2, โฆ) 0deg runs bottom to top, 90deg left to right, 180deg top to bottom. Radial: radial-gradient(circle, colour1 position1, colour2 position2, โฆ) Colours change outward from the centre. You can set 2 to 6 colour stops; they are sorted by position (%) before output. Colours blend smoothly between stops. Putting two colours at the same position creates a hard edge, useful for stripes.
Worked example
Default output background: linear-gradient(90deg, #1a3a5c 0%, #4facfe 100%); It runs from dark navy on the left to light blue on the right. Stripe example linear-gradient(90deg, #1a3a5c 0%, #1a3a5c 50%, #4facfe 50%, #4facfe 100%) The left half is navy and the right half light blue.
Things to be aware of
- Gradients are background images, so use background or background-image, not background-color.
- When placing text over a gradient, check contrast at every point along it.
- All major browsers support gradients without vendor prefixes such as -webkit-.
FAQ
How many color stops can I add?
Up to 6 color stops.
Can I set an angle for a radial gradient?
No, radial gradients spread outward in a circle from the center, so there's no angle to set. Angle only applies to linear gradients.
Can I use the generated CSS as-is?
Yes, it's output in the form "background: linear-gradient(...);", ready to paste directly into your CSS file.