CSS acos() Function

The acos() function is a CSS math function that calculates the inverse cosine of a value.

If you're brushing up on your trigonometry, the inverse cosine (also known as arccosine) is used to find an angle when you already know the ratio of two sides of a right triangle. In CSS, the acos() function takes a single number between -1 and 1, and it returns an angle between 0deg and 180deg.

For example:

While you might not use this every day, trigonometric functions (like acos(), asin(), and atan()) can be very powerful for advanced UI development. They allow you to calculate dynamic angles for 3D transforms, circular layouts, or complex animations directly in your CSS, without needing to rely on JavaScript to do the math.

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

View Output Full Screen Preview

How It Works

The acos() function takes a single calculation as its argument. This argument must resolve to a number between -1 and 1. If you provide a number outside of this range, the result is NaN (Not a Number), and the property will be ignored.

Just like the calc() function, acos() evaluates mathematical expressions automatically. You can write equations directly inside the parentheses, like acos(var(--a) / var(--b)).

Official Syntax

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

Possible Values

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

calc-sum

A mathematical calculation that resolves to a number between -1 and 1. The function evaluates this number and returns the corresponding angle.

CSS Specifications

Browser Support

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