Pick your colours, copy the CSS - done
Adjust colours and direction with the controls above, watch the live preview update instantly, then copy the ready-to-paste CSS with one click. No sign-up, no installation, no guesswork - just the gradient code you need.
The output covers every major browser and includes the background shorthand property so you can drop it straight into your stylesheet. Everything runs in your browser, so no colour data or CSS is ever uploaded anywhere.
How to use the CSS gradient generator
- Choose a gradient type - linear (diagonal/straight), radial (circle/ellipse from the centre), or conic (pie-chart style sweep).
- Add colour stops - pick at least two colours. Drag the stop markers to set where each colour starts and ends.
- Set the angle or position - for linear gradients, drag the angle wheel or type a degree value (0 - 360). For radial, pick where the centre sits.
- Copy the CSS - hit Copy CSS and paste directly into your stylesheet or design tool.
Worked example
Say you want a smooth ocean-blue-to-teal background for a hero section, running diagonally. Set the type to linear, angle to 135deg, and add two colour stops:
| Stop | Colour | Position |
|---|---|---|
| 1 | #0f4c81 | 0% |
| 2 | #00b4d8 | 100% |
The generator outputs:
background: linear-gradient(135deg, #0f4c81 0%, #00b4d8 100%);Paste that one line into your CSS and the gradient appears immediately - no prefix or vendor flag needed in any modern browser.
Quick gradient syntax reference
The three gradient functions in CSS each solve a different layout problem:
/* Linear - straight line in any direction */
background: linear-gradient(90deg, #1a73e8, #34a853);
/* Radial - radiates outward from a point */
background: radial-gradient(circle at center, #1a73e8, #34a853);
/* Conic - rotates around a centre point (great for pie charts) */
background: conic-gradient(from 0deg, #1a73e8, #34a853, #1a73e8);Linear gradients take an angle or keyword (to right, to bottom left). Radial ones let you control the shape (circle or ellipse) and starting point. Conic gradients sweep around a centre - useful for colour wheels and progress indicators.
How to write a gradient in code
Once you have the CSS string from the tool, using it in your project is straightforward.
Vanilla CSS
.hero {
background: linear-gradient(135deg, #0f4c81 0%, #00b4d8 100%);
min-height: 100vh;
}JavaScript (inline style)
const hero = document.querySelector('.hero');
hero.style.background = 'linear-gradient(135deg, #0f4c81 0%, #00b4d8 100%)';React (inline style object)
function Hero() {
return (
<div style={{ background: 'linear-gradient(135deg, #0f4c81 0%, #00b4d8 100%)' }}>
Hello
</div>
);
}Tailwind CSS (arbitrary value)
<div class='bg-gradient-to-br from-[#0f4c81] to-[#00b4d8]'></div>Tailwind's built-in gradient utilities cover the most common cases; for conic or complex multi-stop gradients, use an arbitrary value in square brackets or extend your Tailwind config.
How it works
The generator builds a valid CSS gradient value from the options you set: type, angle, colour stops and positions. It assembles the background declaration and renders it live in the preview box using your browser's own CSS engine - exactly how it will look on your site.
Because everything happens client-side, your colour choices never leave your device. There is no server involved at any step.
When to use a visual gradient builder (and when not to)
- Use it when you want to dial in colours visually before committing to code - much faster than tweaking hex values by hand and refreshing.
- Use it for quick prototypes, hero sections, button backgrounds, or card overlays where a two- or three-stop gradient is enough.
- Skip it if you need a complex animated gradient or one that changes with JavaScript at runtime - write that logic directly in code.
- Skip it for SVG gradients (
<linearGradient>), which have a different syntax and are defined inside the SVG markup, not CSS.
If you work with JSON-based design tokens or API responses that produce dynamic colour palettes, you might also find our JSON Beautifier or JSON Validator handy for reading and cleaning that data before wiring it into CSS variables.
Ready to build your gradient? Use the controls at the top of the page, tweak until it looks right, and hit Copy CSS - your stylesheet is one paste away.