# Gradians and Turns: the quiet heroes of CSS angles

###
Ken Bellows
Jan 21
*Updated on Jan 22, 2019 *
・6 min read

When a design feels a bit too static and you want to add a little bit of motion to it (either animated or simply implied), think about adding some rotation or skew to your design.

- Rotate user pictures a smidge, then rotate back on hover: Smashing Magazine
- Rotate some images and skew your header's background: Stripe
- Loading spinners of all sorts: loading.io
- And there's always those super impressive CSS animation demos

However you use it, at the end of the day, if you're rotating or skewing something, then you're dealing with **angles**.

And for a lot of people, angles are... intimidating. Scary, even. But I want to argue that they can be made *much* easier simply by using different **angle units** to define your angles.

# Degrees and Radians are hard

The two most common angle units are the ones we all know and hate, degrees (`deg`

) and radians (`rad`

). Degrees are everyone's default, it seems, and they're fine, we're all used to them, but the math is awkward, to say the least. (What's halfway between `180deg`

and `270deg`

again?) And I'll guess that talking about radians sends a lot of people right back to high school trigonometry, trying not to make eye contact with the teacher when they ask a question about the tangent of 3π⁄4.

Brief side rant: Why do I need 2π to make a circle, so that everything is half what it should be? Why isn't (3/4)π just three quarters of the circle?? I mean, I know historically why, but why haven't we all switched to using τ instead yet?

Anyway, if you're one of the many (myself included) who have been nervous about rotations because it means unwieldy units and frustrating math, I have good news: CSS actually has **four different units for angles**, and the other two are, IMHO, *much* easier to work with. These units are called **gradians** (`grad`

) and **turns** (`turn`

).

# Gradians

The gradian is a unit of rotation that's actually been around for a few centuries. It's also called the "metric degree" because it was formalized alongside the metric system in 18th century France.

It seems that some folks were fed up with the crazy math used by many of the units we now call Imperial Units (8 pints to a gallon, 12 inches to a foot, 14 pounds to a stone, ... *are you guys okay?*) and decided to make a system where everything is based on powers of 10: 100 centimeters to a meter, 1000 milliliters to a liter, 1000 grams to a kilogram, etc.

The same thing happened with angles. Instead of 360 degrees, someone suggested dividing a circle into a nice round *400 parts*, so that each **quadrant**, or quarter-circle, is nicely divided into 100 bits. And thus, we have the gradian! There are **400 gradians** in a full circle. A quarter-circle is 100 gradians (`100grad`

in CSS), and a half circle is 200 gradians (`200grad`

). Isn't that much easier to think about than 360, 90, and 180?

So gradians are cool, and I'll come back to them in a minute. But now let me tell you about the unit I'm *really* excited about.

# Turns

Turns are one of those very small things that I'm *very* excited about (arguably too excited). But if you've done any significant amount of designing with rotation, especially animation, hopefully you'll feel the same way in a minute.

When you're designing an animation or thinking about how to add some rotation to your design, how are you thinking about it? You probably aren't thinking in numbers. You're probably thinking:

- "I want this object to roll into view. It should probably turn over twice as it rolls."
- "Why don't we rotate that icon a quarter-turn on hover? That could be cool."
- "That loading icon should turn all the way around twice per second."

You don't usually think in degrees or radians. You think in terms of full turns and portions of turns. At least, I do.

Now imagine if you could just tell this to the browser, just tell it how many times the thing you're rotating should turn around, without converting it to any crazy units. Well, it turns out... *you can!* That's exactly what turns are!

One turn (`1turn`

in CSS) just means "one full rotation". In other words, you know, "turn around one time". (It's apparently also a somewhat standardized unit of angular measurement

I like to think of turns as the "transparent" angle unit, because they're barely a unit at all. They are just the answer to the question above: "How many times should this thing turn around?" Or put another way, "How many *turns* should this thing make?"

# Why are these units useful?

Let's look at some common angles compared between degrees, radians, and gradians (all rounded to 2 decimal places).

Degrees | Radians | Gradians | Turns | My Fav Unit |
---|---|---|---|---|

`30deg` |
`0.52rad` |
`33.33grad` |
`0.08turn` |
Gradians |

`45deg` |
`0.79rad` |
`50grad` |
`0.13turn` |
Gradians |

`60deg` |
`1.04rad` |
`66.67grad` |
`0.17turn` |
Gradians |

`90deg` |
`1.57rad` |
`100grad` |
`0.25turn` |
Turns |

`180deg` |
`3.14rad` |
`200grad` |
`0.5turn` |
Turns |

`360deg` |
`6.28rad` |
`400grad` |
`1turn` |
Turns |

`720deg` |
`12.56rad` |
`800grad` |
`2turn` |
Turns |

`1080deg` |
`25.12rad` |
`1200grad` |
`3turn` |
Turns |

In every case, I find either gradians or turns to be the easiest to read, visualize, and use for mental math. It is true that I'm used to dealing with some angles in degrees, the usual 30, 90, 180, 270, 360. But as soon as I need any angle not on that list, it gets real hard, real fast. And the thing is, I'm used to dealing with *everything else* in base 10, from money to school grades to how old I am, so I'm *way* more experienced with base-10 mental math.

And when it comes to design, it's not really about mental math anyway. It's about **visualizing** what I want to make and turning that into code. And I think that's easier with gradians and turns, even for the common angles.

For example, if I think about it, I can figure out that 30 degrees is a third of a 90 degree quadrant. But I can't *see* 30 degrees in my head, not without a lot of effort. But when I see `33.33grad`

, all those 3s immediately *say* "one third" to me. I know what that number looks like, and for some reason I can more easily visualize what kind of angle that is, even though it's the same angle.

# Example!

You can't write a whole article about a code feature without showing it off, can you?

# When should we use each?

Looking at the table again, I probably wouldn't want to use turns if I'm doing a lot of animating within a single quadrant. `30deg`

converts to `0.0833turn`

and `60deg`

converts to `0.1667turn`

, neither of which mean anything to me. But I think a single quadrant is where gradians really shine. Everything becomes basically percentages of a quadrant! And that's awesome!

On the other end of the spectrum, I'd much rather use turns for anything larger than a single quadrant, *especially* one you rotate more than a single full circle.

# Browser Support

In case you're concerned about browser support, don't be! Both of these units have been fully supported for a very long time in all major browsers, both desktop and mobile. Take a look at MDN's compatibility table for the `<angle>`

CSS type:

Even *IE 9* had full support for both gradians and turns. That's how far back this goes. So don't worry about browser support.

# A Note about SVG

Unfortunately, the one place you *can't* use these amazing new units is in SVG animations, so if you're the kind of person who loves to hand-craft complex SVG, you're out of luck, and I'm so sorry 😢

Tragically, while SVG does use CSS, it's not quite the same as the CSS used for HTML. As Sara Soueidan points out in her excellent article about SVG transformations, angles in the variant of CSS used for SVG are always specified without a unit, and they're always degrees. Which is a huge bummer, because SVG is a great place to do animations. But on the other hand, I guess most people are typically using editors to generate their SVG these days, aren't they? I'm not big into that myself, so I'm no expert, but that's what I hear.

# Conclusion

I want to hear some feedback on this one! This article has been pretty subjective, so I would really like to hear what other people think about these units. Has anyone used them on a significant project? Did you like them? Were they actually terrible for a reason I haven't considered? Let me know!

If you’re gonna specify 30° (1/3 of a right angle, i.e. 1/12 of a full angle), you don’t need

`30deg`

nor`0.0833turn`

– nor do you need`33.333grad`

. You might want to use`calc(1/12 * 1turn)`

– probably the easiest to read notation.Definitely a solid option. I personally would have a hard time visualizing how much of a turn that is, since I'm super not used to thinking in twelfths, but if you like it, roll with it!

That's the big takeaway that I hope people get from this article: adding

`turn`

s and`grad`

s into the mix gives us way more flexibility in finding the most personally useful way to express our angles. Use the one that makes the most sense to you and your team!I’ve given private math lessons for years, so…

`deg`

for life!Haha, fair enough! Why not go the distance and go all radians all the time? 😜

Just remember though, ain't all about you, it's about everyone else who has to read/deal with your code!

Good point!

Gradians have theirs perks, but on the other hand:

expectsthem (i.e., they're error inducing);Actually, gradians are a banned unit on my style linter. Really not worth it.

Turns are very good and expressive, instead. They can also be nice to use with JavaScript computations.

Really appreciate the feedback! Here are my thoughts:

Sure, but that's true of anything before it becomes commonplace; the same is true of

`turn`

s, which you like. I do take your point about more obscure features being surprising for someone who comes along later, but in the case of CSS, there are atonof hidden gems that few people are aware of, and I think the answer is to use themmorerather than less, along with better education. And IMHO, a new unit is a very small, very concrete thing, and is very easy to learn and understand, especially given the value I see in it.This is absolutely true, and there are definitely cases where that's very valuable, especially with more complex, multi-state, repeated rotations. But when it comes to hand-designing simple animations and static skew/rotation effects, I personally find that the ability to deal with angles as a percent of a quarter turn with no mental math is more than worth the trade-off, especially given that 1) I'm very used to dealing with percentages in fractions anyway (33.333% and all that), and 2) I'm usually sticking to whole-number percentages anyway, usually multiples of 10 and 25. And in fact, 90

isn'tevenly divisible by 4 (90˚÷ 4 = 22.5˚), so`grad`

s might have a slight benefit in that way, if whole numbers are important to you.True of course, but again, this applies just as well to

`turn`

s. But I'm happy to concede that if you're doing things complicated enough to make SVGs worth the effort, you probably should be sticking to degrees, since you'll probably wind up using trig functions. And as I mentioned in the article, in my (familiar, but admittedly non-expert) experience, it's rare to hand-jam your SVGs these days anyway, so let the computer handle it when possible.Overall, I don't think you're

wrongin anything you said; those are all very legitimate concerns, especially depending on what you're rotating, and if those concerns are enough to dissuade you from using gradians, then hey, you've gotta do what's best for you. I just find them useful enough to be more than worth the tradeoffs. I hope my main point is clear: I think that gradians are probably the most useful within the very specific context of rotations within a single quadrant, but in that context they'reveryuseful.Thanks Ken ... I came to know about the multiple rotations of the element can be done easily using turns..