CSS Gradient Generator

Design a CSS gradient and copy the code

CSS Gradient Generator builds the three kinds of gradient CSS can draw — linear, radial and conic — from two to eight colour stops. The preview redraws as you change anything, and the code box always holds CSS you can paste straight into a rule.

The CSS is written by the page in your browser. Nothing is uploaded, and there’s no account or limit.

How to make a gradient background

1. Choose Linear, Radial or Conic, or start from one of the six presets.
2. For linear, drag the Angle slider, type 0–359, or use the arrow buttons for the eight common directions. For radial, pick Ellipse or Circle and one of nine positions. For conic, set the start angle and the position.
3. Edit each colour stop with the swatch or a HEX value, and give it a position from 0 to 100%.
4. Use Add stop for more colours (up to eight) and the bin button to remove one (two must stay).
5. Tick Repeating if you want the pattern to repeat, then click Copy CSS.

What the gradient CSS contains

• A fallback line: background-color in the first stop’s colour, so a browser that can’t read the gradient still paints a solid colour. Browsers that can read it use the gradient.
• The gradient line: for example background: linear-gradient(90deg, #6d28d9 0%, #06b6d4 100%); with lowercase six-digit HEX colours and whole-percentage positions.
• Stops in order: stops are written from the lowest position to the highest, whatever order the rows are in. Two stops at the same position make a hard edge, as in the Stripes preset.

Where gradients come in handy

• Hero sections and banners: a soft background behind a headline, with no image file to load.
• Buttons and cards: a subtle diagonal blend. Check text on top with the Color Contrast Checker at both ends of the gradient.
• Stripes and colour wheels: repeating gradients with hard stops make stripes; conic gradients make wheels and simple pie shapes.

Tips for smoother gradients

• Pick related colours: two shades from a colour palette usually blend more cleanly than unrelated hues, which can pass through a muddy middle.
• Steer the middle: Add stop puts a new stop halfway across the widest gap, in the average of its neighbours; change its colour to lift a dull midpoint.
• Repeating needs short stops: with stops at 0% and 100% nothing repeats. End the last stop well below 100%, such as 10%.

Linear, radial and conic gradients explained

How the three types differ

A linear gradient changes colour along a straight line at your angle: 90deg runs left to right, 180deg top to bottom. A radial gradient spreads outwards from a point as an ellipse or a circle. A conic gradient sweeps around a point like a clock hand, starting at the from angle — which is why the colour wheel preset starts and ends with the same red.

This tool writes angles rather than keywords such as to top right. A keyword aims at the corner of the box, while 45deg is fixed, so on a wide box the two differ slightly.

Gradient support in browsers

Linear, radial and conic gradients and their repeating versions work in all current versions of Chrome, Edge, Firefox and Safari without prefixes. Conic gradients reached browsers later than the other two, one reason the fallback line is included.

CSS Gradient Generator: common questions