CSS atan() Function

The atan() function is a CSS math function that calculates the inverse tangent of a value.

Also known as arctangent, this trigonometric function is used to find an angle when you know the ratio of the opposite side to the adjacent side of a right triangle. Unlike acos() and asin() (which only accept numbers between -1 and 1), the atan() function accepts any number. It evaluates this number and returns an angle between -90deg and 90deg.

For example:

atan(1) returns 45deg
atan(0) returns 0deg
atan(-1) returns -45deg
atan(infinity) returns 90deg

Trigonometric functions in CSS are quite handy for advanced UI development. They allow you to calculate dynamic angles for 3D transforms, circular layouts, or complex animations directly in your stylesheet, reducing the need to rely on JavaScript for layout math.

Here's a simple example where we use a CSS custom property (set to 1) and pass it into the atan() function to determine the rotation of a box. The inverse tangent of 1 is exactly 45 degrees, so the box rotates by 45 degrees:

View Output Full Screen Preview

How It Works

The atan() function takes a single calculation as its argument. This argument can resolve to any positive or negative number.

The function evaluates mathematical expressions automatically (just like the calc() function). You can write equations directly inside the parentheses, like atan(var(--y) / var(--x)).

Official Syntax

The official syntax of the atan() function is as follows:

Possible Values

As indicated in the official syntax, the atan() function accepts the following value:

calc-sum: A mathematical calculation that resolves to any number. The function evaluates this number and returns the corresponding angle.

CSS Specifications

The atan() function is defined in CSS Values and Units Module Level 4 (Editor's Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.