Create beautiful CSS gradients visually with multiple color stops. Generate linear, radial, and conic gradients with instant preview.
background: linear-gradient(to right, #FF0000, #0000FF);
Pick a gradient type, choose your colours, drag each stop to where you want it, and watch the preview update as you go. The CSS appears underneath as a single ready-to-paste <code>background</code> declaration. Add as many colour stops as you need, set a custom angle for linear gradients, and copy the result — it all runs in your browser.
Runs in your browser. This tool runs entirely in your browser using JavaScript. Nothing you enter or open here is uploaded to our servers.
Linear runs along a straight line, radial spreads out from the centre, conic sweeps around it like a pie chart.
For linear gradients, pick one of the eight presets or choose "Custom angle…" and drag the slider to any value between 0° and 360°.
Click a swatch to open your system colour picker, and drag each stop's slider to position it along the gradient. Add Color Stop inserts another.
The generated declaration appears below the preview. Copy CSS puts it on your clipboard, ready to paste onto any element.
Real input and the output this tool produces for it.
| Example | Input | Result |
|---|---|---|
| Simple left-to-right | Linear, To Right, #FF0000 at 0%, #0000FF at 100% |
background: linear-gradient(to right, #FF0000 0%, #0000FF 100%); |
| Diagonal at a custom angle | Linear, Custom angle 135° |
background: linear-gradient(135deg, …); |
| Radial glow | Radial type |
background: radial-gradient(circle, …); |
| Hard stop | Two stops both positioned at 50% |
A crisp two-colour split with no blend between them |
They differ in the shape the colours travel along, and each suits a different job.
| Type | How colours travel | Typical use |
|---|---|---|
| linear-gradient | Along a straight line, in a direction or at an angle | Hero backgrounds, buttons, section dividers |
| radial-gradient | Outward from a centre point | Spotlights, glows, soft vignettes |
| conic-gradient | Around a centre point, like a clock face | Pie and donut charts, colour wheels, sweep effects |
CSS gradient angles are measured clockwise from "up". 0deg points to the top, 90deg to the right, 180deg to the bottom, 270deg to the left. This trips people up because it is not the mathematical convention, where 0 points right and angles run anticlockwise.
The keyword directions are shorthands for exactly the same thing: to right is 90deg, to bottom is 180deg. Keywords also behave slightly differently on non-square boxes — to bottom right always points at the actual corner, whereas a fixed angle does not follow the box as it resizes.
A colour stop is a colour and the position along the gradient where it sits. Between two stops the browser blends smoothly; the positions control where each colour is at full strength.
Two useful patterns come out of that. Putting two stops at the same position creates a hard stop — a crisp line with no blending, which is how gradient-based stripes and progress bars are built. And bunching several stops close together concentrates the transition in a narrow band, leaving broad flat areas either side.
A gradient between two very different hues will pass through muddy intermediate colours. Adding a stop in the middle at a colour you actually want steers it through better territory.
A few things are worth knowing before you paste the result into production CSS.
-webkit- or -moz- gradient prefixes for years, but if you support very old browsers you will need to add them yourself.background-color before the gradient line is good practice for anywhere the gradient does not render, and for readable text if it fails.rgba().ellipse at top left.from 0deg in the copied CSS to rotate the sweep.Text over a gradient has to stay legible across the whole span, not just where you happened to check. A white heading that reads well over the dark end of a gradient can fail badly over the light end.
Check contrast against the lightest and darkest points of the gradient behind the text, and keep the range narrow where text sits. A semi-transparent overlay between the gradient and the text is the usual fix when the range has to stay wide.
A gradient gives a section depth without the page weight of a background image.
A subtle two-stop gradient makes a primary button read as raised.
A thin gradient strip along the top edge of a card is a cheap way to distinguish sections.
Copy the CSS and switch the colours to rgba() to build a scrim that keeps caption text readable.
Conic gradients with hard stops render donut charts with no library at all.
A soft gradient block is a tidier placeholder than a flat grey box.
Find two colours that work together before building the gradient.
Color Palette Generator →Sample exact HEX values out of a logo or photograph.
Color Picker from Image →Get the channel values you need to write an rgba() stop by hand.
HEX to RGB Converter →Compress the stylesheet once the gradient is in it.
CSS Minifier →Tidy the markup the gradient is applied to.
HTML Beautifier →Carry the same colours into the browser tab.
Favicon Generator →Help others discover this tool by sharing it on social media
Paste this iframe into your own page to give your readers the working tool without sending them away. The embed carries a "Powered by TechBelievers" link and needs no API key.
<iframe src="https://techbelievers.com/tools/gradient-generator/embed?theme=light" width="100%" height="600px" title="Gradient Generator by TechBelievers" style="border:1px solid #e2e8f0;border-radius:0.5rem"></iframe>