CSS atan() Function

CSS atan() Function

The CSS atan() function calculates the inverse tangent of a number and returns an angle. It is useful for mathematical calculations, rotations, and CSS effects that require an angle derived from a numeric ratio.

Syntax

atan(number)

The atan() function accepts one numeric expression and returns an angle.

For example:

transform: rotate(atan(1));

The expression atan(1) returns 45deg, so the element rotates 45 degrees.

The function also accepts mathematical expressions:

transform: rotate(atan(3 / 4));

The division evaluates to 0.75, producing a rotation of approximately 36.87deg.

The returned angle can be used in CSS properties and functions that accept angle values.

Parameters

The atan() function accepts exactly one argument.

Unlike asin() and acos(), the atan() function does not restrict its input to the range from -1 to 1.

Valid examples include:

atan(1)
atan(0.5)
atan(0)
atan(-0.5)
atan(-1)
atan(10)
atan(var(--tangent-value))

CSS mathematical constants can also be used:

atan(pi / 2)
atan(infinity)
atan(-infinity)

The argument represents a tangent value, not an angle. For example, atan(45deg) is invalid because the argument must resolve to a number.

How It Works

The atan() function performs the inverse of the tangent function within the angle range from -90 to 90 degrees.

The tangent function calculates a number from an angle:

tan(45deg)  /* 1 */

The inverse tangent function performs the opposite calculation:

atan(1)  /* 45deg */

For a right triangle, the tangent of an acute angle is the ratio of the opposite side to the adjacent side.

For example, if the opposite side is 75 units and the adjacent side is 100 units, the tangent ratio is 0.75.

atan(75 / 100)  /* Approximately 36.87deg */

The result is an angle of approximately 36.87 degrees.

Negative tangent values produce negative angles:

atan(-1)  /* -45deg */

Unlike tan(), which returns a number, atan() returns an angle.

Because multiple angles can share the same tangent value, atan() returns the principal angle between -90deg and 90deg.

Return Values

The atan() function returns an angle between -90deg and 90deg. For finite input values, the result is strictly between these limits.

The result can also be represented in radians, turns, or gradians.

For example, atan(1) is equivalent to 45deg, 0.125turn, or approximately 0.7854rad.

The function preserves the sign of zero. A negative zero input produces a negative zero angle.

Using Calculations

The atan() function can calculate angles from mathematical expressions.

For example:

.example {
  transform: rotate(atan(3 / 5));
}

The ratio 3 / 5 equals 0.6, producing a rotation of approximately 30.96deg.

You can also use calc():

.example {
  transform: rotate(atan(calc(3 / 5)));
}

The result is the same. The additional calc() wrapper is optional.

Compatible length values can be divided to obtain a unitless ratio:

.example {
  transform: rotate(atan(75px / 100px));
}

The length units cancel, producing 0.75 and an angle of approximately 36.87deg.

The input can be greater than 1 or less than -1:

.example {
  transform: rotate(atan(2));
}

This produces an angle of approximately 63.43deg.

Using Custom Properties

CSS custom properties can supply the numeric value used by atan().

For example:

:root {
  --tangent-value: 1;
}
.example {
  transform: rotate(atan(var(--tangent-value)));
}

The custom property contains 1, so the resulting rotation is 45deg.

Changing the custom property changes the calculated angle:

:root {
  --tangent-value: 0.5;
}

The resulting rotation becomes approximately 26.57deg.

You can also calculate a ratio using two custom properties:

:root {
  --opposite: 75;
  --adjacent: 100;
}
.example {
  transform: rotate(atan(var(--opposite) / var(--adjacent)));
}

The ratio is 0.75, producing a rotation of approximately 36.87deg.

This technique is useful when a component's measurements change and its angle needs to be recalculated.

Example

The following example demonstrates how different tangent values produce different rotation angles.

Each blue line uses atan() to calculate its rotation.

HTML:

<div class="atan-demo">
  <div class="atan-row">
    <span>atan(2) = 63.43deg</span>
    <div class="atan-line atan-one"></div>
  </div>
  <div class="atan-row">
    <span>atan(1) = 45deg</span>
    <div class="atan-line atan-two"></div>
  </div>
  <div class="atan-row">
    <span>atan(0) = 0deg</span>
    <div class="atan-line atan-three"></div>
  </div>
  <div class="atan-row">
    <span>atan(-1) = -45deg</span>
    <div class="atan-line atan-four"></div>
  </div>
  <div class="atan-row">
    <span>atan(-2) = -63.43deg</span>
    <div class="atan-line atan-five"></div>
  </div>
</div>

CSS:

.atan-demo {
  display: grid;
  gap: 12px;
}
.atan-row {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 100px;
}
.atan-row span {
  width: 210px;
  flex-shrink: 0;
}
.atan-line {
  width: 90px;
  height: 8px;
  background-color: #0066cc;
  transform-origin: center;
}
.atan-one {
  transform: rotate(63.43deg);
  transform: rotate(atan(2));
}
.atan-two {
  transform: rotate(45deg);
  transform: rotate(atan(1));
}
.atan-three {
  transform: rotate(0deg);
  transform: rotate(atan(0));
}
.atan-four {
  transform: rotate(-45deg);
  transform: rotate(atan(-1));
}
.atan-five {
  transform: rotate(-63.43deg);
  transform: rotate(atan(-2));
}

The lines rotate by approximately 63.43, 45, 0, -45, and -63.43 degrees based on their tangent values.

Positive angles rotate clockwise in the default CSS coordinate system, while negative angles rotate counterclockwise.

Fixed-angle fallback declarations are included for browsers that do not support atan().

atan() vs. atan2()

The atan() and atan2() functions both calculate angles, but they accept different arguments and return different angle ranges.

For example:

atan(1)       /* 45deg */
atan2(1, 1)   /* 45deg */
atan2(1, -1)  /* 135deg */

The atan() function uses a single ratio, so it cannot determine whether the original coordinates were both positive or both negative.

The atan2() function uses separate vertical and horizontal values, allowing it to distinguish directions in different quadrants.

Use atan() for a known tangent ratio and atan2() when the signs and directions of two coordinate components matter.

Related Trigonometric Functions

CSS provides several trigonometric functions for converting between angles and numeric ratios.

For example, tan(45deg) returns 1, while atan(1) returns 45deg.

The inverse trigonometric functions return principal angles rather than every possible angle that produces a particular trigonometric value.

Common Uses

The atan() function is useful for CSS calculations involving angles and proportional measurements.

For example:

.example {
  transform: rotate(atan(0.75));
}

This rotates the element by approximately 36.87deg.

Limitations

The atan() function has several important limitations.

• It accepts exactly one numeric expression.
• The argument must resolve to a unitless number.
• It returns an angle rather than a number or length.
• For finite inputs, its return value is strictly between -90deg and 90deg.
• It cannot distinguish all coordinate quadrants from a single tangent ratio.
• Its result must be used in a CSS context that accepts angles.
• Older browsers may not support the function.

For example:

transform: rotate(atan(1));

This is valid because rotate() accepts an angle.

However:

width: atan(1);

This is invalid because width does not accept an angle.

Unlike asin() and acos(), atan() accepts numeric values outside the range from -1 to 1.

For calculations involving two coordinate components, consider using atan2() instead.

Browser Support

The atan() function is Baseline Widely available and has been supported across major browser engines since March 2023.

Older browsers may not recognize CSS trigonometric functions. Fixed-angle fallback values can help maintain a usable appearance.

.example {
  transform: rotate(45deg);
  transform: rotate(atan(1));
}

Browsers that support atan() use the calculated angle. Browsers that do not support it retain the earlier valid declaration.

You can also check support using @supports:

@supports (transform: rotate(atan(1))) {
  .example {
    transform: rotate(atan(1));
  }
}

For current compatibility information, visit Can I Use? and search for CSS trigonometric functions.

Specifications

The atan() function is defined in the CSS Values and Units Module Level 4 .

The specification defines atan() as an inverse trigonometric function that returns an angle between -90 and 90 degrees.

Related functions include acos(), asin(), atan2(), cos(), sin(), and tan().