Widely available Supported across all major browsers. Safe to use in production.

sin(), cos(), tan(), asin(), acos(), atan(), and atan2() (CSS)

The acos() CSS function is a trigonometric function that returns the inverse cosine of a number between -1 and 1. The function contains a single calculation that returns an <angle> between 0deg and 180deg.

Syntax and cascade

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
acos
111
111
108
15.4
111
15.4
Other
css.types.asin

The asin() CSS function is a trigonometric function that returns the inverse sine of a number between -1 and 1. The function contains a single calculation that returns an angle between -90deg and 90deg.
111
111
108
15.4
111
15.4
css.types.atan

The atan() CSS function is a trigonometric function that returns the inverse tangent of a number between -∞ and +∞. The function contains a single calculation that returns an angle between -90deg and 90deg.
111
111
108
15.4
111
15.4
css.types.atan2

The atan2() CSS function is a trigonometric function that returns the inverse tangent of two values between -infinity and infinity. The function accepts two arguments and returns an angle between -180deg and 180deg, without implying any specific unit such as radians.
111
111
108
15.4
111
15.4
css.types.cos

The cos() CSS function is a trigonometric function that returns the cosine of a number, which is a value between -1 and 1. The function contains a single calculation that must resolve to either a &lt;number&gt; or an angle by interpreting the result of the argument as radians. That is, cos(45deg), cos(0.125turn), and cos(3.14159 / 4) all represent the same…
111
111
108
15.4
111
15.4
css.types.sin

The sin() CSS function is a trigonometric function that returns the sine of a number, which is a value between -1 and 1. The function contains a single calculation that must resolve to either a &lt;number&gt; or an angle by interpreting the result of the argument as radians. That is, sin(45deg), sin(0.125turn), and sin(3.14159 / 4) all represent the same…
111
111
108
15.4
111
15.4
css.types.tan

The tan() CSS function is a trigonometric function that returns the tangent of a number, which is a value between −infinity and infinity. The function contains a single calculation that must resolve to either a &lt;number&gt; or an angle by interpreting the result of the argument as radians.
111
111
108
15.4
111
15.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.circular-layout {
  --items: 8;
  --radius: 150px;
}

.circular-layout > * {
  --angle: calc(360deg / var(--items) * var(--i));
  position: absolute;
  left: calc(50% + var(--radius) * cos(var(--angle)));
  top: calc(50% + var(--radius) * sin(var(--angle)));
  transform: translate(-50%, -50%);
}

Live demo

Circleshapeplacement

Trigonometric functions (sin, cos, tan, etc.) Circleshapeplacement demo.

PreviewFullscreen

waveformpattern

Trigonometric functions (sin, cos, tan, etc.) waveformpattern demo.

PreviewFullscreen

Rotateangle

Trigonometric functions (sin, cos, tan, etc.) Rotateangle demo.

PreviewFullscreen

Use cases

  • Using sin(), cos(), tan(), asin(), acos(), atan(), and atan2() (CSS)

    The acos() CSS function is a trigonometric function that returns the inverse cosine of a number between -1 and 1.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links