What linear-gradient() takes
background: linear-gradient(135deg, #F5A63D 0%, #A8340F 100%);
An angle, then a list of colour stops. Each stop is a colour and a position along the line; the browser blends between neighbours. Everything the tool above outputs is exactly that line.
| Angle | Direction |
| --- | --- |
| 0deg | bottom to top |
| 90deg | left to right |
| 180deg | top to bottom |
| 135deg | top-left to bottom-right |
Stops are positions, not just colours
Two stops at the same position make a hard edge. Stops out of order are clamped to the previous one rather than throwing an error, which is why a gradient can silently look wrong after an edit — the tool sorts them for you.
Where it is used
Buttons and cards, page backgrounds, overlays on photos so text stays
readable (linear-gradient(to top, rgb(0 0 0 / .6), transparent)), and skeleton
loaders. Need the same colours as a circle or a sweep? The radial
and full gradient generator share this link format,
so the stops carry over.
Computed on your device
The preview is CSS in your browser. Nothing is uploaded; the link in the address bar is the whole gradient.
Questions
Which way does 0deg point?+
Up. CSS angles start at the top and go clockwise, so 90deg runs left to right, 180deg top to bottom, 270deg right to left. The 135deg default here runs from the top-left corner to the bottom-right, which is the diagonal most designs use.
Can I use words instead of degrees?+
Yes — `to right`, `to bottom left` and so on are valid and mean the same as the matching angle. This tool emits degrees because they are unambiguous and let you use every value in between; `to bottom right` is 135deg only on a square box, since the keyword form aims at the corner and the degree form does not.
Why is the middle of my two-colour gradient grey?+
sRGB interpolation passes through desaturated grey between distant hues — blue to yellow is the classic. Either add a stop in the middle with the colour you want, or interpolate in a perceptual space: `linear-gradient(in oklab, …)` is supported in current browsers.
How do I get a hard edge instead of a blend?+
Put two stops at the same position. `red 50%, blue 50%` switches from red to blue with no transition — that is how stripes, split backgrounds and progress bars are done in pure CSS.
Does it work as a background on any element?+
Yes. A gradient is an image, so it goes wherever `background-image` goes: body, a button, a card, a pseudo-element. It scales to the box with no file and no blur.