Tool Arsenal All tools

CSS Gradient Generator

Build a CSS gradient and copy the exact declaration. Angles follow the CSS specification, where 0deg points up and angles turn clockwise.

Start from

css
background-image: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 55%, #f472b6 100%);

1 layer, painted in order — the first sits on top of the ones below it.

A CSS gradient is a generated image, not a colour, which is why it belongs in background-image rather than background-color. The angle is the part people get wrong most often: in CSS, 0deg points upward and angles turn clockwise, so 90deg runs left to right. This editor takes as many colour stops as you need, lets you reorder them, and stacks several gradients into one declaration — the way mesh backgrounds are built. Everything is assembled in your browser and nothing is sent anywhere.

How it is calculated

linear-gradient([ <angle> | to <side-or-corner> ]?, <color-stop-list>)

The grammar comes straight from the CSS Images specification. Each colour stop is a colour followed by an optional position, and percentages resolve against the gradient line, with 0% at the start and 100% at the end.

Source: W3C CSS Images Module Level 3 — <linear-gradient()> grammar and gradient line

Questions people ask

Why does 90deg go left to right instead of top to bottom?
Because the specification defines 0deg as pointing upward with positive angles rotating clockwise. That puts 90deg toward the right, 180deg toward the bottom and 270deg toward the left.
Is "to bottom" the same as 180deg?
Yes for a rectangle of any size. The keyword form is often easier to read, while the angle form is easier to animate or compute.
Can I stack several gradients?
Yes, and it is how most "mesh" backgrounds are made. background-image takes a comma separated list, the first layer sits on top, and layers above the base normally use colours that fade to transparent so the ones underneath show through.
What is the difference between the SCSS and Sass output?
SCSS is a superset of CSS — braces and semicolons stay, so the declaration looks familiar. The indented Sass syntax drops both and uses indentation instead. The gradient value itself is identical in all three.
Can I put the gradient in background-color?
No. A gradient is an image, so it belongs in background-image, or in the background shorthand. Setting it on background-color has no effect.

Found a problem, or want more?

A number that disagrees with its source is a defect, not a rounding preference.

What did you enter, what did the tool show, and what did you expect instead? If you have a source that disagrees with ours, a link to it is the most useful thing you can send.

Write to us

Opens your mail app with the page and tool already filled in.

Related tools

calculatorColor

HEX to RGB

Convert a hex colour to its red, green and blue channels, including the shorthand and alpha forms defined by the CSS specification.