CSS acos() Function

CSS acos() Function

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

Syntax

acos(number)

The acos() function accepts one number between -1 and 1 and returns an angle.

For example:

transform: rotate(acos(0.5));

The expression acos(0.5) returns 60deg, so the element rotates 60 degrees.

The function can also accept mathematical expressions:

transform: rotate(acos(1 - 0.5));

The calculation evaluates to 0.5, producing the same 60-degree rotation.

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

Parameters

The acos() function accepts one argument.

The argument represents a cosine value, not an angle.

Valid examples include:

acos(1)
acos(0.5)
acos(0)
acos(-0.5)
acos(-1)
acos(var(--cosine-value))

Values outside the range -1 to 1 produce a NaN result.

The function requires exactly one argument. Multiple comma-separated arguments are invalid.

How It Works

The acos() function is the inverse of the cosine function over the angle range from 0 to 180 degrees.

The cosine function calculates a number from an angle:

cos(60deg)  /* 0.5 */

The inverse cosine function performs the opposite calculation:

acos(0.5)  /* 60deg */

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

For example, when the adjacent side is 50 units and the hypotenuse is 100 units, the cosine ratio is 0.5.

acos(50 / 100)  /* 60deg */

The result is an angle of 60 degrees.

The function also handles negative cosine values, which correspond to angles greater than 90 degrees within its return range.

Unlike cos(), which returns a number, acos() returns an angle.

Return Values

The acos() function returns an angle between 0deg and 180deg, inclusive, for inputs in its valid range.

The returned angle can also be represented in radians, turns, or gradians when combined with appropriate CSS calculations.

For example, acos(0) is equivalent to 90deg, 0.25turn, or approximately 1.5708rad.

Using Calculations

The acos() function can be used with mathematical expressions to calculate angles from numeric ratios.

For example:

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

The ratio 3 / 5 equals 0.6, so the rotation is approximately 53.13deg.

You can also combine acos() with calc():

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

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

When working with lengths, divide compatible dimensions to obtain a unitless ratio:

.example {
  transform: rotate(acos(50px / 100px));
}

The length units cancel, producing 0.5 and a rotation of 60deg.

When using acos(), make sure the calculated ratio remains between -1 and 1.

Using Custom Properties

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

For example:

:root {
  --cosine-value: 0.5;
}
.example {
  transform: rotate(acos(var(--cosine-value)));
}

The custom property contains 0.5, so the resulting rotation is 60deg.

Changing the custom property changes the calculated angle.

:root {
  --cosine-value: 0;
}

The resulting rotation becomes 90deg.

You can also calculate a ratio from two custom properties:

:root {
  --adjacent: 50;
  --hypotenuse: 100;
}
.example {
  transform: rotate(acos(var(--adjacent) / var(--hypotenuse)));
}

The ratio is 0.5, producing a 60-degree rotation.

This technique is useful when CSS values change but the resulting angle should be calculated automatically.

Example

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

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

HTML:

<div class="acos-demo">
  <div class="acos-row">
    <span>acos(1) = 0deg</span>
    <div class="acos-line acos-one"></div>
  </div>
  <div class="acos-row">
    <span>acos(0.5) = 60deg</span>
    <div class="acos-line acos-two"></div>
  </div>
  <div class="acos-row">
    <span>acos(0) = 90deg</span>
    <div class="acos-line acos-three"></div>
  </div>
  <div class="acos-row">
    <span>acos(-0.5) = 120deg</span>
    <div class="acos-line acos-four"></div>
  </div>
</div>

CSS:

.acos-demo {
  display: grid;
  gap: 16px;
}
.acos-row {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 100px;
}
.acos-row span {
  width: 190px;
  flex-shrink: 0;
}
.acos-line {
  width: 90px;
  height: 8px;
  background-color: #0066cc;
  transform-origin: center;
}
.acos-one {
  transform: rotate(acos(1));
}
.acos-two {
  transform: rotate(acos(0.5));
}
.acos-three {
  transform: rotate(acos(0));
}
.acos-four {
  transform: rotate(acos(-0.5));
}

The first line remains horizontal because acos(1) returns 0deg.

The remaining lines rotate by 60, 90, and 120 degrees.

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

Related Trigonometric Functions

CSS includes several trigonometric functions for working with angles and numeric ratios.

The inverse trigonometric functions are useful when a ratio is known but an angle is needed.

For example, cos(60deg) returns 0.5, while acos(0.5) returns 60deg.

Common Uses

The acos() function can be useful in CSS calculations involving angles and geometric relationships.

For example, the following declaration rotates an element by the angle whose cosine is 0.75:

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

The resulting rotation is approximately 41.41deg.

Limitations

The acos() function has several important limitations.

• It accepts exactly one numeric expression.
• The argument must evaluate to a unitless number.
• Values outside the range -1 to 1 produce NaN.
• It returns an angle, not a unitless number or length.
• It cannot operate directly on strings or colors.
• The resulting angle must be used in a context that accepts angle values.
• Older browsers may not support the function.

For example:

transform: rotate(acos(0.5));

This is valid because rotate() accepts an angle.

However:

width: acos(0.5);

This is invalid because width does not accept an angle.

Likewise, the following expression produces NaN because its argument is outside the valid range:

transform: rotate(acos(2));

For predictable results, ensure that the input stays between -1 and 1.

Browser Support

The acos() function is part of the modern CSS trigonometric math functions and is supported in current versions of major browsers. It is considered Baseline Widely available.

Older browser versions may not recognize the function, so fallback values can be useful when supporting legacy browsers.

.example {
  transform: rotate(60deg);
  transform: rotate(acos(0.5));
}

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

You can also test for support with @supports:

@supports (transform: rotate(acos(0.5))) {
  .example {
    transform: rotate(acos(0.5));
  }
}

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

Specifications

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

The specification defines the function as the inverse cosine operation, returning an angle between 0 and 180 degrees for inputs from -1 to 1.

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