CSS Gradient Angles: A Complete Guide (0deg to 360deg)

If you've ever typed linear-gradient(135deg, ...) and wondered why 135deg produces that particular diagonal — or why 0deg goes up instead of to the right — this guide clears it all up.

How CSS gradient angles work

CSS uses a clock-based angle system, but with one twist: 0° points upward (toward 12 o'clock on a clock face), not to the right as you might expect from school geometry. Angles increase clockwise from there.

So:

• 0deg → bottom to top (same as to top)
• 90deg → left to right (same as to right)
• 180deg → top to bottom (same as to bottom)
• 270deg → right to left (same as to left)

The 8 main angles

Angle	Direction	CSS keyword
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

135deg is the most popular

You'll see 135deg everywhere in modern web design — it produces the classic top-left to bottom-right diagonal that feels both dynamic and balanced. SaaS apps, developer tools, and landing pages all lean on it heavily.

/* The classic SaaS diagonal */
background: linear-gradient(135deg, #6c63ff 0%, #f43f8a 100%);

Keyword vs degree: what's the difference?

CSS keyword directions like to right and to bottom right always point toward a corner or edge of the element, regardless of the element's aspect ratio. Degree values are absolute and don't adapt to element shape.

For most use cases, they're interchangeable. For precise control (e.g. striped backgrounds where the angle must be exact), use degrees.

Multi-stop gradients with angles

Angles work the same way for gradients with multiple colour stops:

/* Sunset — 3 stops at 135deg */
background: linear-gradient(
  135deg,
  #f97316 0%,
  #ec4899 50%,
  #8b5cf6 100%
);

Add as many stops as you need. Each stop's position percentage is measured along the gradient axis from start to end.

Repeating gradients

Use repeating-linear-gradient() with a fixed stop size to create stripes:

/* 45deg stripes */
background: repeating-linear-gradient(
  45deg,
  #2f855a 0px,
  #2f855a 10px,
  transparent 10px,
  transparent 20px
);

Quick tool

If you're building a gradient visually and want to experiment with angles, colour stops, and gradient types (linear, radial, conic) all in one place — the CSS Gradient Generator on SnappyTools lets you drag an angle slider and see the output CSS update live. Works offline once loaded, no signup.

---

Understanding angles makes CSS gradients much more predictable. Once you know 135deg is the "standard diagonal," you'll start recognising it everywhere — and be able to reproduce any gradient you see on the web by eye.