CSS gradients confuse a lot of developers because the angle system doesn't work the way you'd expect from school trigonometry. Once you understand the pattern, every gradient you see becomes readable — and every gradient you build becomes intentional.
The CSS angle system
In CSS, gradient angles measure direction from 12 o'clock (straight up), increasing clockwise. This is different from standard math angles, which measure from 3 o'clock increasing counter-clockwise.
The result:
0deg → bottom to top90deg → left to right180deg → top to bottom270deg → right to left
The 8 standard angles
| Angle | Direction | CSS keyword equivalent |
|-------|-----------|----------------------|
| 0deg | Bottom → Top | to top |
| 45deg | Bottom-left → Top-right | to top right |
| 90deg | Left → Right | to right |
| 135deg | Top-left → Bottom-right | to bottom right |
| 180deg | Top → Bottom | to bottom |
| 225deg | Top-right → Bottom-left | to bottom left |
| 270deg | Right → Left | to left |
| 315deg | Bottom-right → Top-left | to top left |
Why 135deg is everywhere
Browse any modern SaaS landing page and you'll see 135deg gradients. It's the "default diagonal" — enough movement to feel dynamic, but balanced enough not to feel chaotic. Purple-to-pink, blue-to-teal, and orange-to-red gradients all look natural at 135deg.
``css
/ The classic /
background: linear-gradient(135deg, #6c63ff 0%, #f43f8a 100%);
`
Keyword vs degree
CSS keywords like to bottom right point toward the corner of the element, so the actual angle depends on the element's aspect ratio. A 100x100px element with to bottom right uses exactly 135deg, but a 200x100px element uses a different angle.
For consistency, especially in tight designs, use explicit degree values.
Practical examples
`css
/ Hero section — top to bottom /
background: linear-gradient(180deg, #1e3a8a 0%, #0f172a 100%);
/ Progress bar — left to right /
background: linear-gradient(90deg, #2f855a, #68d391);
/ Button — subtle diagonal /
background: linear-gradient(135deg, #276749, #2f855a);
``
Building gradients visually
If you prefer to experiment visually before writing CSS, the CSS Gradient Generator on SnappyTools has an angle slider, multi-stop colour pickers, and outputs ready-to-paste CSS for linear, radial, and conic gradients. It also exports Tailwind arbitrary-value classes directly.
Gradient angles become intuitive quickly — once you remember that 0deg points up and values go clockwise, the rest follows. Keep 135deg in your muscle memory as the go-to diagonal, and reach for 90deg and 180deg for UI bars and page sections.