Angle 90°
Build a CSS gradient visually
Pick a linear or radial gradient, add as many colour stops as you like, drag each one’s position and opacity, and set the angle — the preview updates live. Copy the ready-to-paste background rule when it looks right. Runs entirely in your browser.
Frequently Asked Questions
What’s the difference between linear and radial?
A linear gradient blends colours along a straight line (you set the angle); a radial gradient blends outward in a circle from the centre. Switch types to see both instantly.
Can I use more than two colours?
Yes — click “Add colour stop” to insert as many as you need, and position each one along the gradient from 0% to 100%.
Why is the colour written as rgba()?
Each stop has an opacity slider, so the colour is emitted as rgba() — that lets stops fade to transparent, which is common in modern UI backgrounds.
Is my data private?
Yes — it’s pure client-side JavaScript. Nothing is uploaded or stored.
