Blend two or three colors, turn the angle, switch between linear and radial — then copy one line of CSS straight into your project.
Three quick steps — no account, no upload, nothing leaves your device.
Choose a start and end color — and optionally switch on a middle stop for a richer blend.
Drag the angle for linear gradients, or switch to radial for a soft glow from the centre. Or start from a preset.
One click copies the ready-made background declaration — paste it into any stylesheet or style block.
Quick answers about CSS gradients.
A linear gradient blends colors along a straight line at the angle you choose — 0° runs bottom to top, 90° runs left to right. A radial gradient blends outward from the centre, like a soft spotlight or glow.
Into any CSS rule for the element you want to fill — a page body, a header, a button, a card. For example: .hero { background: linear-gradient(...); } — the generator gives you the full background: declaration.
Yes. CSS gradients have been supported by every modern browser for over a decade, on phones and desktops alike — no images and no JavaScript needed on your page.
Of course. A gradient is just colors and numbers — use the output in personal and commercial projects without attribution.