CSS Gradient Generator

How it works

Type your colours into the left panel: one colour per line, and the line order is the order of the gradient. HEX, RGB and HSL notations are all recognised. To pin a colour to a specific point, add a percentage to the end of its line: "#2F6FED 30" fixes that colour at the 30% mark, and colours without a position are spread evenly across the remaining range. Then pick the type — for a linear gradient the angle slider sets the direction (90 degrees runs left to right, 180 top to bottom), for a conic gradient it sets the start angle, and a radial gradient always opens from the centre outwards. The preview refreshes on every keystroke. In the generated CSS the first colour is also written as a plain background-color, so even a client that cannot draw gradients never shows an empty surface. Copy the code, or press Download to save the same gradient as a 1920×1080 pixel PNG.

This tool is also known as css gradient generator, linear gradient css, radial gradient generator, conic gradient css, gradient background css, gradient png download.

What is linear-gradient?

linear-gradient is the CSS function that blends two or more colours along a straight line. Its first parameter is the direction angle: 0 degrees runs bottom to top, 90 degrees left to right, 180 top to bottom. The colour stops follow, each carrying a colour and an optional position. The browser computes the blend for every pixel between two stops, so the output is not an image file but a drawing instruction — it stays sharp at any resolution and its colours change with a one-line edit.

What is Color stop?

A color stop is the pair that tells a gradient where a colour appears at full strength: a colour value plus a percentage position. Writing "#2F6FED 30%" means the pure colour sits exactly at the 30% mark, and every pixel between two stops is a mixture of both. Give two stops the same position and you get a hard edge instead of a blend — in this tool, stops without a written position are spread evenly, while the ones you position stay exactly where you put them.

What is the difference between linear-gradient and radial-gradient?

Both blend colours by the same rules; what differs is the geometry the transition follows. linear-gradient pours the colours along a straight line: you choose the line's angle, and along any cut perpendicular to it the colour is constant — it is the tool for edge-to-edge backdrops, strips and button fills. radial-gradient opens from a centre outwards in rings: the first stop sits at the centre, the last on the outermost ring, and there is no notion of direction, which is why the angle slider does not apply to it. Spotlights, vignettes and focus effects — anything read from the inside out — are built with the radial form.

The seam line and banding traps

A conic gradient makes a full turn and arrives back where it started. If your last colour differs from your first, a hard seam line appears where the circle closes — that is the nature of the shape, not a bug. For an unbroken ring, repeat the first colour on the last line; the tool distributes the positions accordingly.

The second trap is banding: when two very close shades stretch across a wide area, the screen's 256 levels per channel cannot carry the transition smoothly and visible steps appear. Moving the shades further apart, narrowing the transition area or adding an intermediate stop breaks the bands up.

Which gradient type fits which job?

The choice of type is as much about function as taste; all three have established uses.

• Linear → button and card backgrounds, header strips, page backdrops
• Radial → spotlight effects, vignettes, focus points
• Conic → pie charts, colour wheels, loading rings
• PNG output → places CSS cannot reach: slide backgrounds, e-mail templates, wallpapers

Frequently asked questions

How do I control where each colour sits in the gradient?

Add a number from 0 to 100 to the end of the line: "#DB2777 75" pins that colour at the 75% mark. The percent sign is optional, and colours without a position are spread evenly over the remaining range.

What does the Download button save?

A 1920×1080 pixel PNG of the previewed gradient. For the CSS itself use the copy button; the code goes to your clipboard exactly as shown.

How many colours can I use?

Between 2 and 12. Two colours cover most jobs; with more stops you control the order by line order and the positions with the percentages at the end of each line.

Does the generated CSS work in older browsers?

linear-gradient and radial-gradient have worked in every current browser for many years. conic-gradient is newer (versions from around 2020 onwards); on a very old client, the plain background-color line inside the code takes over.