CSS asin() Function

The asin() function is a CSS math function that calculates the inverse sine of a value.

Also known as arcsine, this trigonometric function is used to find an angle when you know the ratio of the opposite side to the hypotenuse of a right triangle. In CSS, the asin() function takes a single number between -1 and 1, and it returns an angle between -90deg and 90deg.

For example:

asin(1) returns 90deg
asin(0) returns 0deg
asin(-1) returns -90deg

Like other trigonometric functions in CSS (such as acos() and atan()), asin() can be very useful for advanced UI development. It allows you to calculate dynamic angles for 3D transforms, circular layouts, or complex animations directly in your CSS, without relying on JavaScript.

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

View Output Full Screen Preview

How It Works

The asin() 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, asin() evaluates mathematical expressions automatically. You can write equations directly inside the parentheses, like asin(var(--a) / var(--b)).

Official Syntax

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

Possible Values

As indicated in the official syntax, the asin() 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

The asin() 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.