Linear gradient CSS generator
Set the angle on the dial, drag the colour stops, and copy a linear-gradient() that works everywhere — with an explainer that shows exactly where the browser puts 0% and 100%.
#ff2d87 · rgb(255 45 135) · hsl(334 100% 59%) · oklch(66.1% 0.245 1.9)
Contrast audit worst 1.73:1
Range across the gradient: 1.73 to 3.51:1. Weakest point at 100% (#ffb800). Fails AA somewhere — text over that area will be hard to read.
Nearest text colour that passes 4.5:1 across the whole gradient:
Export
.gradient {
background: linear-gradient(135deg, #ff2d87 0%, #ff457b 8.3%, #ff5671 16.7%, #ff6469 25%, #ff7061 33.3%, #ff7b5b 41.7%, #ff8555 50%, #ff8e4f 58.3%, #ff9749 66.7%, #ff9f43 75%, #ffa83a 83.3%, #ffb02b 91.7%, #ffb800 100%);
background: linear-gradient(in oklch 135deg, #ff2d87 0%, #ffb800 100%);
}The first line is a pre-blended fallback for browsers without “in oklch” support (pre-2023); the second line is the native version.
The gradient line, explained
A linear gradient is painted along an invisible gradient line through the centre of the box at your chosen angle. The line is exactly long enough that the lines drawn at right angles through its ends touch the box’s corners. That’s why a 45° gradient on a wide banner looks steeper than you expect: the line stretches to reach the far corners.
Change the angle and the box width and watch the length formula update. It’s the same maths the tool uses when it exports your gradient to SVG and PNG.
Gradient line length = |320 × sin 45°| + |180 × cos 45°| = 353.6px. The dashed lines are where 0% and 100% sit: they are drawn perpendicular to the line and touch the box’s corners, which is why both corners get the pure end colours at any angle.
linear-gradient() syntax reference
background: linear-gradient(135deg, #ff2d87 0%, #ffb800 100%); background: linear-gradient(to right, #0f0c29, #302b63 40%, #6a3fa0); background: linear-gradient(in oklch 90deg, blue, yellow); background: repeating-linear-gradient(45deg, #111 0 10px, #ffb800 10px 20px);
| Part | Values | Notes |
|---|---|---|
| Direction | 135deg, 0.25turn, to right, to top left | Default is to bottom (180deg). |
| Interpolation | in oklch, in oklab, in srgb-linear, in hsl longer hue | CSS Color 4; default sRGB. |
| Colour stop | #hex, rgb(), hsl(), oklch(), named colours | Position in %, px or any length. |
| Hint | a lone 30% between two stops | Moves the 50/50 midpoint of that segment. |
Stops without a position are spread evenly between their neighbours. If a stop’s position is smaller than an earlier one, the browser clamps it to the earlier value — which is how you get hard edges.
Questions
What is the syntax of linear-gradient()?
linear-gradient([ <angle> | to <side-or-corner> ]? [in <colour-space>]?, <colour-stop>, <colour-stop>, …). Only the colour stops are required; the default direction is to bottom (180deg).
Which way does 0deg point?
Up. 0deg runs from bottom to top, 90deg from left to right, 180deg from top to bottom. Angles go clockwise, unlike the maths convention.
Is “to top right” the same as 45deg?
Only in a square. Corner keywords aim the gradient so the colour line passes through the two other corners, so the angle changes with the element’s aspect ratio. A fixed angle stays fixed.
How do I make a hard line instead of a fade?
Give two stops the same position: linear-gradient(90deg, red 50%, blue 50%). You can also write a double-position stop: red 0 50%, blue 50% 100%.
How do I fade to transparent without a grey edge?
Fade to a transparent version of the same colour, e.g. rgb(255 45 135 / 0) rather than transparent, or blend in oklab. Modern browsers interpolate in premultiplied alpha, so plain transparent is mostly safe today, but the explicit colour is the robust choice.