Stops are ordered by position when the CSS is generated. The first line is a solid-colour fallback from the first stop, for browsers that do not support gradients. Opacity below 100% makes a stop transparent, so the page behind the gradient shows through.
What is the CSS Gradient Generator?
A CSS gradient generator is a visual tool that builds smooth colour blends for you and writes the CSS. Instead of memorising gradient syntax, you pick colours, set their positions, and watch the result appear in a live preview. This free CSS gradient generator makes linear, radial and conic gradients — the three kinds CSS supports — and gives you clean, ready-to-paste code with a solid-colour fallback for older browsers.
It is for anyone who builds websites: beginners learning CSS, designers who want a quick hero background, and developers who need a gradient without opening a design app. There is no sign-up and nothing is uploaded. The whole tool runs in your browser, so the colours you pick never leave your device.
A gradient is simply a smooth transition between two or more colours. Browsers paint it with the background property, and it works on almost anything — page backgrounds, buttons, cards, headings and image overlays.
How to use the CSS Gradient Generator
The tool sits at the top of this page. The options are on the left and the live preview with the generated CSS is on the right. Follow these steps:
- Pick a starting point. Click one of the presets: Sunset, Ocean, Forest, Crimson fade, Magenta glow or Rainbow. The tool loads with the Sunset gradient — a warm blend from amber through crimson to magenta — so you can see it working straight away.
- Choose the gradient type. The “Gradient type” dropdown offers Linear, Radial and Conic. Linear blends colours along a straight line, radial blends them outwards from a centre point, and conic sweeps them around a circle like a colour wheel.
- Set the direction. For a linear gradient, use “Angle (degrees)”. 0 degrees points up, 90 degrees points right and 180 degrees points down, so 135 degrees runs diagonally from the top left to the bottom right. Drag the slider or type the number. For a conic gradient, the “Starting angle (degrees)” field sets where the sweep begins, measured clockwise from the top.
- Shape and position (radial gradients). Choose “Shape” — Ellipse or Circle — and “Position”: Centre, Top, Bottom, Left, Right or any of the four corners. These two fields only appear when the gradient type is Radial.
- Edit the colour stops. Each stop has a colour, an opacity and a position. Click a stop’s colour to change it, drag or type its position (0 to 100), and lower its opacity if you want it partly see-through. Click “Add a colour stop” to add another — you can have up to eight. Remove a stop with its remove button. The stops are ordered by position when the CSS is generated, so they never come out in the wrong order.
- Copy the CSS. Click “Copy CSS” to copy it to the clipboard, or “Download CSS” to save it as a file. “Clear” empties the output and “Reset” restores the Sunset gradient.
Worked example: a sunset hero background
Say you want a warm diagonal gradient for a hero section. Click the Sunset preset. The preview shows amber fading into crimson and then magenta, and the Generated CSS box reads:
background: #f59e0b;
background: linear-gradient(135deg, #f59e0b 0%, #e62f41 50%, #db529c 100%);
The first line is a solid-colour fallback — the first stop’s colour — for browsers that do not support gradients. The second line is the gradient itself: a 135-degree diagonal with three stops, at 0%, 50% and 100%. Paste both lines into your hero class:
.hero {
background: #f59e0b;
background: linear-gradient(135deg, #f59e0b 0%, #e62f41 50%, #db529c 100%);
}
White text reads well on this blend, and you can soften it by lowering the middle stop’s opacity.
Where to use CSS gradients
Hero backgrounds. A full-width hero is the most common home for a gradient. A diagonal two- or three-colour blend adds depth to a section that would otherwise be a flat block of colour, and it costs nothing in file size. Pick colours that sit close together on the colour wheel for a calm look, or opposite colours for energy. Always check that your heading still reads clearly on top — white or very dark text usually works best.
Buttons and calls to action. A subtle gradient makes a button feel raised and tappable without any image. Try a light-to-dark blend of the same colour family, for example a crimson button that runs from #e62f41 at the top to a darker #b81f2e at the bottom. Keep the difference small: a strong contrast between the two stops can make the button look striped rather than shaded.
Overlays on photos. A photo with white text on top is hard to read where the photo is bright. A gradient overlay fixes it: a blend that starts transparent at the top and fades to a dark, mostly opaque colour at the bottom darkens exactly the area behind the text. Set the first stop’s opacity to 0% and the last stop’s to 80% or so, and the photo still shows through at the top while the text stays readable at the bottom.
Tips for better gradients
Start with two stops, then add more only if you need them. Two well-chosen colours usually look better than five random ones. Add a third stop when you want a distinct middle colour, not just because the tool allows eight.
Use opacity for smooth fades to transparency. The Crimson fade preset is a single colour fading from fully opaque to fully transparent — one colour, two stops, with the second stop’s opacity at 0%. This is the cleanest way to fade an element into the page behind it, and it works for overlays, image masks and soft section dividers.
Mind the middle. With three stops, the middle stop’s position controls the balance. At 50% the blend is even; move it to 30% and the first colour dominates, move it to 70% and the second colour takes over. Small moves make a big visual difference, so drag it and watch the preview.
Keep the fallback. The tool always writes the solid-colour fallback line first. Leave it in your CSS. It costs one line and it means very old browsers still show a sensible colour instead of nothing.
Test your text on the gradient, not beside it. A colour that looks fine on its own can vanish where the gradient is lightest. Put your real heading on the real gradient and check it at the size you will actually use, on a phone as well as a desktop.
Frequently asked questions
Do I need to know CSS to use this tool?
No. You pick colours and positions with sliders and colour pickers, and the tool writes the CSS for you. The generated code is standard CSS, so you can paste it into a stylesheet, a <style> block or a page builder’s custom CSS field. If you are learning CSS, reading the generated code is a good way to see how gradients are written.
What is the difference between linear, radial and conic gradients?
A linear gradient blends colours along a straight line — the classic top-to-bottom or diagonal fade. A radial gradient blends outwards from a point, which is good for glows and spotlight effects. A conic gradient sweeps colours around a centre point, which is how you make colour wheels and pie-chart style fills. All three use colour stops; they just arrange them differently.
Why does the generated CSS have two background lines?
The first line is a solid-colour fallback using the first stop’s colour. Browsers that understand gradients ignore it and use the second line; browsers that do not support gradients use the first line and still show a sensible colour. It is one extra line that makes your page degrade gracefully.
Can I make a gradient fade to transparent?
Yes. Set any stop’s opacity below 100% and that stop becomes see-through. To fade a colour out completely, add a second stop with the same colour and 0% opacity — the Crimson fade preset does exactly this with #e62f41. The page or image behind the gradient shows through where the gradient is transparent.
Is my gradient saved anywhere?
No. The tool runs entirely in your browser. Nothing you pick is sent to a server or stored, and there is no account. If you want to keep a gradient, copy the CSS or download it as a file before you leave the page.
Conclusion
Gradients are one of the cheapest ways to make a page feel designed: a few lines of CSS, no image files, and a result that stays sharp on every screen. Build yours above with the CSS Gradient Generator, then paste the code into your site. If you need colours to work with, the HTML Color Picker on this site will give you any shade in HEX, RGB or HSL — and it will convert between them for you.