Generators
CSS Gradient Generator
Build a CSS linear gradient from two colours and an angle, preview it live and copy ready-to-use CSS.
About the CSS Gradient Generator
The CSS Gradient Generator creates linear, radial and conic gradients with two to five colours. Start from a preset like Sunset or Ocean or a random pair, pick colours with a colour picker, set the angle with a slider or direction buttons, and copy the ready-to-use CSS.
What you can do with the CSS Gradient Generator
- Three gradient types: Linear, radial and conic.
- 2 to 5 colours: Pick each with a colour picker.
- Presets: Start from Sunset, Ocean or a random pair.
- Copy the CSS: Ready to paste into your stylesheet.
How the angle works
In CSS, 0deg runs from bottom to top, 90deg from left to right, and 180deg from top to bottom. A 135deg gradient runs diagonally from the top-left towards the bottom-right, a popular choice for buttons and backgrounds. The arrow buttons set the common directions in one tap.
Linear, radial or conic?
Linear gradients blend along a straight line, radial gradients spread out from the centre like a glow, and conic gradients sweep around a centre point like a colour wheel, useful for pie-chart-style effects.
Avoiding muddy middles
Blending two colours from opposite sides of the colour wheel, like blue and orange, can produce a greyish band in the middle. Picking colours closer together, or adding a third colour in between, gives a cleaner blend.
Related tools
Frequently Asked Questions
What colour formats can I use?
Pick colours with the picker or type HEX, rgb(…) or hsl(…) codes.
How do I make a vertical gradient?
Tap ↓ 180° for top-to-bottom or ↑ 0° for bottom-to-top.
Can I add more than two colours?
Yes, tap "+ Add colour" for up to five. Tap × next to a colour to remove it.
What is the difference between linear, radial and conic gradients?
A linear gradient blends colours along a straight line at the angle you set. A radial gradient spreads out in a circle from the centre. A conic gradient sweeps colours around the centre like the hands of a clock, which is useful for pie-chart and colour-wheel effects.
Which direction does a 135 degree gradient go?
In CSS, 0deg runs from bottom to top and the angle turns clockwise, so 90deg runs left to right and 135deg runs from the top-left corner to the bottom-right. Use the arrow buttons for the common directions or drag the slider for any angle.
Why does the angle slider disappear when I choose Radial?
The radial option always makes a circle that starts at the centre, so an angle has no effect and the slider is hidden. For Conic, the angle sets where the colour sweep starts, written as conic-gradient(from 135deg, ...) in the CSS.
Can I set where each colour starts, like 30%?
The tool spreads colours evenly. To control positions, copy the CSS and add a percentage after any colour, for example linear-gradient(135deg, #8b5cf6 0%, #06b6d4 30%). The browser blends between the positions you give.
How do I remove a colour from the gradient?
When there are three or more colours, an x button appears next to each one. Tap it to remove that colour. A gradient needs at least two colours, so the button is hidden when only two remain.
Why does my gradient repeat in stripes down the page?
If the page body is shorter than the screen, the browser repeats the gradient. Add min-height: 100vh to the body, or add background-attachment: fixed, so one gradient fills the whole window.
How do I use a gradient on text?
Copy the CSS from the tool onto the text element, then add background-clip: text and -webkit-background-clip: text, and set color: transparent. The gradient then shows through the letters. Bold, large text works best.
Do CSS gradients work in all browsers?
Linear and radial gradients work in every modern browser. Conic gradients are supported in current versions of Chrome, Edge, Firefox and Safari, so they are safe for most sites today, though very old browsers will ignore them.
Related tools
- Random Name Picker, Pick one or several random winners from a list of names or entries, fair, quick and ideal for giveaways, raffles and classrooms.
- Random Color Generator, Generate a random colour with its HEX code and a live preview, useful for design ideas and placeholder colours.
- Color Palette Generator, Create a five-colour palette from one starting colour, with evenly spaced hues for balanced, cohesive colour schemes.
- Color Format Converter, Convert colours between HEX, RGB and HSL formats in either direction, with a live colour preview.
- Random Username Generator, Generate six catchy username ideas at a time from adjective and noun combinations, with optional numbers or underscores.
- Passphrase Generator, Generate long, memorable passphrases from a list of over 7,000 English words, with a strength estimate in bits.
Quick Work Studio