πŸ“ CSS Angle Units β€” deg & rad Explained

🌐 What Are Angle Units in CSS?

CSS uses angle units to define rotation, direction, and orientation in various properties like transform, gradients, and animation. The two most commonly used units are:

  • deg β†’ Degrees (most human-friendly)
  • rad β†’ Radians (mathematically precise)
>>β€œAngles define how elements rotate, how gradients flow, and how animations turn.”

πŸ“¦ 1. deg β€” Degrees

deg (degree) is the most commonly used unit in CSS for rotations. A full circle is 360deg.

AngleMeaning
0degNo rotation
90degQuarter turn clockwise
180degHalf turn
360degFull rotation

πŸ§ͺ Example β€” Rotating an Element

rotate with degrees

.box {
  transform: rotate(45deg);
}

Rotates the box 45Β° clockwise.

πŸ“ 2. rad β€” Radians

rad (radian) is a mathematical angle unit. A full circle is 2Ο€ radians (β‰ˆ 6.28318rad).

RadiansEquivalent Degrees
1 radβ‰ˆ 57.296Β°
Ο€/2 rad90Β°
Ο€ rad180Β°
2Ο€ rad360Β°

Note

rad is more common in math-heavy environments like JavaScript animations or SVG transformations.

πŸ§ͺ Example β€” Rotating Using Radians

rotate with radians

.wheel {
  transform: rotate(1.57rad); /* ~90deg */
}

🎨 Where Are Angle Units Used?

  • transform: rotate()
  • transform: skew()
  • gradients (linear, conic)
  • offset-path
  • motion-path animations
  • clip-path (in some shapes)

πŸ“Œ Examples of Angles in Real CSS Scenarios

1️⃣ Linear Gradient Direction

Gradient with angle

.gradient {
  background: linear-gradient(45deg, #ff6, #f06);
}

2️⃣ Conic Gradient

Conic gradient example

.pie {
  background: conic-gradient(from 90deg, red, yellow, green, blue);
}

3️⃣ Skew Transformation

Skew Example

.tilt {
  transform: skewX(20deg);
}

🧠 Converting deg ↔ rad

ConversionFormula
Degrees ➝ Radiansrad = deg Γ— Ο€ / 180
Radians ➝ Degreesdeg = rad Γ— 180 / Ο€

Note

Useful if you're mixing CSS with JavaScript animations.

πŸ“ Visual Guide

Imagine a clock:

  • 3 o'clock β†’ 0deg / 0rad
  • 12 o'clock β†’ 270deg / 4.71rad
  • 6 o'clock β†’ 90deg / 1.57rad

This helps visualize how CSS rotates elements.

⚠️ Common Mistakes

  • ❌ Using rad when degrees are easier (CSS prefers deg)
  • ❌ Forgetting deg in gradients β†’ invalid property
  • ❌ Mixing clockwise (CSS) and counterclockwise (math) mental models

Note

πŸ’‘ Degrees (deg) are almost always the right choice for CSS styling. Use rad only when mathematically necessary.

πŸ”₯ Summary

CSS angle units deg and rad help create rotations, gradients, animations, and advanced UI effects. Degrees are more intuitive, while radians offer mathematical precision.

>>β€œUse deg for design. Use rad for math.”

Learn more β†’ MDN Docs πŸ“˜