What a linear gradient replaces

A linear gradient is a generated image whose colour varies continuously along a straight line. Before it existed, a header fade meant exporting a PNG one pixel wide and stretching it, or stacking a hundred absolutely positioned divs. A gradient is resolution independent, weighs nothing to download, and can be restyled by editing a hex value instead of opening an image editor.

The tool builds the whole declaration for you. Choosing the Bottom-right preset and leaving the two default colours alone yields:

background: linear-gradient(135deg, #f43f5e 0%, #fbbf24 100%);

Read it as three parts: a direction, then a comma-separated list of colour stops, each a colour plus a position.

Direction: the eight presets are just numbers

Every direction button maps to a degree value, and the angle slider is the same control with the labels removed.

Preset	Angle	Equivalent keyword
Top	0deg	to top
Top-right	45deg	to top right
Right	90deg	to right
Bottom-right	135deg	to bottom right
Bottom	180deg	to bottom
Bottom-left	225deg	to bottom left
Left	270deg	to left
Top-left	315deg	to top left

The one thing to memorise: 0deg points up and angles increase clockwise. This is the opposite of the mental model most people bring from mathematics, where zero points right and angles run anticlockwise. So 90deg is "to right", and the generator normalises any value you type into the 0 to 359 range before writing the CSS.

Angle, and why 45deg is not corner to corner

The gradient line runs through the centre of the box, and its 0% and 100% points are where that line meets perpendiculars drawn from the corners. On a square box at 45deg those points coincide with two opposite corners, so the gradient spans the whole element exactly. On a wide box it does not: the gradient line is longer than the diagonal you had in mind, and the 0% and 100% points fall outside the visible area. The practical result is that a diagonal gradient on a wide banner looks gentler than expected, because the extreme colours are cropped away. If you want the colours to reach the actual corners on a non-square element, set the angle to match the box's proportions rather than assuming 45deg will do it.

Colour stops

Each stop is a colour and a position, and the position is a percentage of that gradient line. The generator starts with two stops at 0% and 100% and lets you add up to six. When you add one, it keeps the list readable by re-spreading every stop evenly — three stops become 0%, 50%, 100%; four become 0%, 33%, 67%, 100% — so you are never left with a stop stranded on top of another one. You can then drag any of them to a custom value.

Three stop behaviours are worth knowing because they are pure CSS, not tool features:

• Two stops at the same position create a hard edge. There is no room left to interpolate, so the colour changes instantly. That is how striped backgrounds are built without images.
• A position lower than the one before it is clamped up to the previous stop's position, because stops must be monotonically increasing. Your gradient quietly loses the back-step instead of erroring.
• Lengths work as well as percentages. A stop at 20px is measured along the gradient line rather than as a fraction, which gives stripes of a fixed width regardless of how large the element is.

Where linear gradients go wrong

• Interpolation happens in sRGB, and the midpoint can be mud. Between two complementary colours the per-channel average is desaturated: blue to yellow passes through a flat grey rather than green, because the red and green channels and the blue channel are moving in opposite directions. The fix is an explicit colour space, linear-gradient(in oklab, blue, yellow), which interpolates perceptually. Support for the in keyword is recent, so keep the ordinary declaration above it as a fallback rather than replacing it.
• The background shorthand wipes other background properties. Writing background: linear-gradient(...) resets background-color, background-position and more. If you want a solid fallback colour, declare the gradient with background-image, or put the plain background-color on the line before.
• Gradients do not transition into one another. Transitioning background-image between two gradients is not interpolated by current browsers, so you get an instant swap rather than a fade. To cross-fade, stack two absolute layers and animate their opacity.
• Large, gentle gradients band. An eight-bit display has limited steps, and a very slow fade across a tall hero section can show visible stripes. Overlaying a faint noise texture is the usual mitigation.
• Text over a gradient needs checking at both ends. A white heading that passes contrast against the light end of the gradient may fail against the dark end. Measure the worst point, or add a scrim behind the text.

Questions about linear gradients

How do I make a gradient repeat?

Swap the function for repeating-linear-gradient() with the same arguments, and the pattern tiles along the gradient line at the interval between the first and last stop. This generator emits the non-repeating form; change the function name by hand.

Can I apply a gradient to text?

Yes, but not with this property. Set background-image to the gradient, then -webkit-background-clip: text plus background-clip: text and a transparent text colour. Keep a solid fallback, because a fully transparent heading is invisible if the clipping is not applied.

Why does my gradient look different in different browsers?

It should not, for the plain sRGB form. Differences usually come from banding and dithering choices on large gradients, or from an interpolation colour space that only some browsers support.

What is the difference between 45deg and "to top right"?

The keyword form aims at the corner, whatever angle that requires for the box's aspect ratio. The degree form is a fixed direction, so on a non-square element the two are not the same.

Do gradients hurt performance?

A gradient is rasterised once and then reused, so a static one is cheap. Animating its position or its stop values forces a repaint of the whole element on every frame, which is far more expensive than animating a composited property such as transform or opacity.