CSS Gradient Generator
Create beautiful CSS gradients in your browser. Pick colors, set direction or angle, preview instantly, then copy the CSS for your site.
CSS Gradient Generator
Preview
CSS Code
What this does
So you want a colour gradient for a background and you would like to see it blend before committing to the CSS. This builds it. Pick a start and end colour, choose a direction or set a custom angle, watch the preview, and copy the gradient code.
How to use it
- Choose your start and end colours.
- Pick a direction from the menu, or choose Custom and use the slider to set an exact angle.
- Copy the generated CSS with the Copy button.
How it works
The tool combines your colours and direction into a linear-gradient and paints it onto the preview as you go, so the blend you see is the one the code will give you. It runs entirely in your browser with no library, updating the moment you change a colour or the angle.
Understanding linear gradients
A linear-gradient blends colours along a straight line. The first part sets the direction, and you can give it either a keyword or an angle. Keywords like to right or to bottom point the gradient the obvious way. An angle in degrees gives finer control: 0deg runs the gradient upward, and the angle increases clockwise, so 90deg runs it to the right, 180deg downward, and so on. After the direction come the colours it blends between, here a start colour and an end colour.
This tool makes a clean two colour gradient, which covers most backgrounds you will reach for. Gradients themselves can do more, more than two colours, and radial or conic shapes, but a simple linear blend between two colours is the everyday workhorse.
A quick note on the output: alongside the standard linear-gradient line, the generated code includes several older prefixed versions and an Internet Explorer filter. Those are there to support browsers from many years ago, and modern browsers only use the unprefixed linear-gradient line, so you can trim the rest if you do not need that reach.
Questions people ask
How do angles work?
An angle sets the gradient's direction in degrees. 0deg points up, and it increases clockwise, so 90deg goes right, 180deg goes down, and 270deg goes left.
Can I use more than two colours?
This tool blends two colours, a start and an end, which suits most backgrounds. The CSS gradient syntax itself does allow more colour stops if you edit the code by hand.
What is all the extra code in the output?
Those are legacy prefixed versions and an old Internet Explorer filter, included for very old browsers. Modern browsers use only the plain linear-gradient line.
Does it need an internet connection?
No. It runs in your browser, so it works offline and updates instantly.
References
- MDN Web Docs. linear-gradient(). https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient
- World Wide Web Consortium. CSS Images Module Level 3. https://www.w3.org/TR/css-images-3/
Sugam Baskota is a senior software engineer and Computer Science graduate from UT Arlington, with interests in user scripts, browser extensions, developer tooling, and productivity systems. He spends time building practical utilities and extensions in the kinds of workflows Eon is designed to simplify. At Eon Tools, he reviews useful, password, and developer tools.