Linear Gradient Maker Online: What the Angle Actually Controls

The angle in linear-gradient() looks like it should work like a compass bearing, but CSS defines it differently — 0deg points straight up, not right, and the angle increases clockwise from there. Getting this backwards is a common source of "why is my gradient going the wrong way" confusion.

The Four Cardinal Angles

0deg   → bottom to top    (color list starts at the bottom)
90deg  → left to right    (color list starts at the left)
180deg → top to bottom    (color list starts at the top)
270deg → right to left    (color list starts at the right)

90 degrees — left to right — is the most commonly used angle by far, since it matches how most UI elements and banners are read.

Angles in Between

background: linear-gradient(45deg, #f97316 0%, #7c3aed 100%);

45 degrees runs diagonally from the bottom-left toward the top-right. Any value between the four cardinal angles produces a diagonal at that specific rotation — useful for a less rigid, more dynamic-feeling background than a strictly horizontal or vertical one.

Why the Direction Is Defined This Way

CSS's angle convention comes from the same system used for rotations elsewhere in the language — 0deg as "up" and clockwise rotation from there is consistent with how transform: rotate() and other angle-based properties behave. It doesn't match a compass or a clock face intuitively, which is exactly why testing the actual angle visually, rather than guessing from the number, saves a round of trial and error.