🌈 CSS Gradient Generator

Which way the angle points

Two colours and an angle build one value. The angle convention is the part worth getting straight: 0deg points to the top and the number increases clockwise, so 90deg runs left to right and 180deg runs top to bottom:

background: linear-gradient(135deg, #6366f1, #ec4899);
background: radial-gradient(circle, #6366f1, #ec4899);

gradient line length on a W × H box:
  L = |W · sin A| + |H · cos A|

The default 135deg therefore travels toward the bottom-right corner. On a 400×200 box that gradient line is 424px long, against 400px at 90deg - which is why the same two colours look like a slower fade on a diagonal. Colours are interpolated channel by channel in sRGB, so the halfway point of the default pair is (99+236)/2, (102+72)/2, (241+153)/2 = #A857C5. Switching to radial drops the angle field entirely and centres a circle, with colour 1 at the middle.

Improving on the two-stop default

• Add stop positions. The output has none, so the fade is spread evenly. #6366f1 0%, #ec4899 65% holds the first colour longer, which usually looks more deliberate.
• Keep the two colours near each other on the wheel, as the indigo and pink default does. Complementary pairs pass through a desaturated grey at the midpoint in sRGB.
• Or interpolate in a better space: linear-gradient(in oklch 135deg, ...) keeps lightness even across the blend and skips the grey dip. It needs a recent browser.

Frequently asked questions