TOOL · COLORS
CSS gradient generator
Pick 2 or 3 colors, tweak positions and angle, watch the gradient live and take the background: declaration ready to paste into your CSS.
Ready-to-use CSS
background: linear-gradient(135deg, #d63327 0%, #243b4a 100%);Processed in your browser — your files never leave your computer.
How it works
-
Pick the colors
Start with two colors in the pickers and adjust each position in %. Need more? "Add color" unlocks a third stop.
-
Adjust type and angle
Linear or radial, one click. On linear, the slider rotates the gradient from 0 to 360° — the big preview follows every tweak in real time.
-
Copy the CSS
The background: declaration sits below the preview, always up to date. One click on "Copy CSS" and just paste it into your project.
Frequently asked questions
What is the difference between linear and radial?
Linear changes color along a straight line — at the angle you choose (0° goes up, 90° goes right, 180° goes down). Radial starts at the center and spreads in a circle to the edges, like a light turned on in the middle of the element.
What does the % position do?
It marks where each color sits "pure" along the path. With #fff at 0% and #000 at 100%, the transition uses the whole path; raise 0% to 40% and white dominates almost half before darkening starts. It is the fine-tuning that separates a generic gradient from an intentional one.
Does the generated CSS work in every browser?
Yes. linear-gradient and radial-gradient have been supported by all browsers since 2017 — no prefixes, no fallbacks, no headaches. Production-ready.
How do I use the copied CSS?
Paste the line inside any selector: .hero { background: linear-gradient(135deg, #d63327 0%, #243b4a 100%); }. It works on any element — div, button, body, whole sections.
Can I make a gradient with transparency?
The tool works with solid hex colors. For transparency, swap a hex in the copied CSS for rgba() or an 8-digit hex (e.g. #d6332700 is invisible red) — the browser blends it just the same.
Is anything I build here sent to a server?
No. The preview and the CSS are generated inside your browser, on your device. Nothing leaves your computer.