About the CSS Gradient Generator
CSS Gradient Generator lets you design a gradient by eye and then copy the CSS. Choose a linear, radial or conic gradient, tick Repeating if you want the pattern to tile, and edit between 2 and 8 colour stops, each with a colour picker, a hex box and a position. The large preview updates as you change anything, and the code below it is ready to paste into a stylesheet. Presets, Reverse and Random buttons give you a quick start. The tool writes the background property, so it replaces any other background on the element where you use it.
Updated September 2026
How to use the CSS Gradient Generator
- 1Pick Linear, Radial or Conic, and tick Repeating if you want a repeating pattern.
- 2Set the angle or the centre, then change the colours and their positions.
- 3Try a preset, or press Reverse or Random for ideas.
- 4Press Copy CSS and paste it into your stylesheet.
Linear, radial and conic gradients
A linear gradient is the most common kind: colours flow from one side to another. The angle sets the direction, where 0 degrees points up, 90 degrees points right and 180 degrees points down. A radial gradient starts at a centre point and spreads outwards, useful for spotlights and glows. A conic gradient rotates around a centre, which gives colour wheels, pie charts and shiny metallic effects.
Repeating gradients tile the same pattern again and again. Use them for stripes, checks and rings.
Angles, positions and colour stops
The eight direction buttons jump the linear angle to a multiple of 45 degrees. Use the slider or number box for other values.
- A colour stop is a colour plus a position from 0 to 100 percent.
- Two stops make a simple fade. Add more for bands or a middle highlight.
- Stops are written in order of position, so you can add them in any order.
- Two stops at the same position make a hard edge instead of a fade.
- Radial and conic gradients also have a centre, set as a percentage across and down.
Copying the CSS
The output box shows one or two lines. The first sets a plain colour and the second sets the gradient. Press Copy CSS and paste them into the rule for your element. Colours are written as hex codes, including an eight-digit form when a colour has transparency.
The generated property is background, so it replaces any other background on that element, such as an image. If you need a gradient on top of an image, move the value into a background-image list by hand.
Design tips for gradients
Gradients between colours that sit next to each other on the colour wheel look smooth. Blending two distant colours can pass through a muddy grey in the middle, and adding a third stop in between fixes it. Keep text readable: put dark text on light parts and light text on dark parts, and check the result on more than one screen because gradients can show slight banding on some displays.
If you need to convert or compare colours first, try Color Converter or pick one from a photo with Image Color Picker. For colour codes use the HEX to RGB Converter, and for a background picture use the Gradient Background Maker.
Features
- Linear, radial and conic gradients
- Repeating versions of all three
- 2 to 8 colour stops with colour picker and hex box
- Angle control with eight direction buttons
- Eight presets, Reverse and Random
- Optional plain colour fallback line
Frequently asked questions
How do I make a CSS gradient?
Choose a type, set two or more colours and copy the result. A simple example is background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%); which fades from red on the left to blue on the right. Paste the line into the rule for the element you want to colour.
What is the difference between linear, radial and conic gradients?
A linear gradient blends colours along a straight line at an angle. A radial gradient blends outwards from a centre point in a circle or ellipse. A conic gradient sweeps colours around a centre point, like a colour wheel or pie chart.
How do I add more colours?
Press Add stop. Each stop has a colour and a position from 0 to 100 percent along the gradient. You can use up to eight stops. Remove a stop with its Remove button; at least two must remain.
How do I make a repeating gradient?
Tick Repeating and set your last colour stop below 100 percent, for example 20 percent. The pattern then repeats to fill the space, which is how stripes and rings are made. Without a stop below 100 percent the repeat is not visible.
Do gradients work in all browsers?
Linear and radial gradients work in every current browser. Conic gradients are also supported by all current ones, but very old browsers may ignore them. That is why there is an option to add a plain colour fallback line before the gradient.
How do I use the gradient as a text or button background?
For a button, paste the line into the button's CSS rule. For text, use the same gradient as the background, add background-clip: text and set the text colour to transparent. Both properties are needed for the text to show the gradient.
Why is there a colour line before the gradient line?
It is a fallback. A browser that doesn't understand the gradient line ignores it and uses the plain colour above it instead. It uses the first colour stop, and you can switch it off with the checkbox.