Gradians and Turns: the quiet heroes of CSS angles

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!

Comments

[Gunnar Bittersmann]

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.

[Ken Bellows]

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 turns and grads 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!

[Šime Vidas]

I’ve given private math lessons for years, so… deg for life!

[Ken Bellows]

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!

[Šime Vidas]

Good point!

[Massimo Artizzu]

Gradians have theirs perks, but on the other hand:

• nobody uses them;
• nobody expects them (i.e., they're error inducing);
• 100 has less divisors than 90 (that's actually why we ended up with degrees in the first place);
• as you mentioned, they're not supported by SVG.

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.

[Ken Bellows]

Really appreciate the feedback! Here are my thoughts:

• nobody uses them;
• nobody expects them (i.e., they're error inducing);

Sure, but that's true of anything before it becomes commonplace; the same is true of turns, 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 a ton of hidden gems that few people are aware of, and I think the answer is to use them more rather 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.

• 100 has less divisors than 90

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't evenly divisible by 4 (90˚÷ 4 = 22.5˚), so grads might have a slight benefit in that way, if whole numbers are important to you.

• as you mentioned, they're not supported by SVG.

True of course, but again, this applies just as well to turns. 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 wrong in 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're very useful.

[Mohamed Hussain]

Thanks Ken ... I came to know about the multiple rotations of the element can be done easily using turns..