CSS cos() Function

CSS cos() Function

The CSS cos() function calculates the cosine of an angle and returns a number between -1 and 1.

It is commonly used in mathematical CSS expressions to calculate horizontal positions, adjust element dimensions, and create circular layouts. The function supports angle units such as degrees, radians, and turns, allowing trigonometric calculations directly in CSS.

Syntax

cos(angle)

The function accepts one calculation that resolves to an angle or a number. It returns the cosine as a unitless number.

For example:

.example {
  width: calc(100px * cos(45deg));
}

The cosine of 45 degrees is approximately 0.707, so the calculated width is approximately 70.7 pixels.

Additional examples:

cos(0deg)
cos(45deg)
cos(90deg)
cos(180deg)
cos(0.25turn)
cos(1.5708rad)
cos(pi)
cos(pi / 2)

The function can be used inside mathematical CSS expressions:

width: calc(200px * cos(30deg));
transform: translateX(calc(100px * cos(60deg)));
left: calc(50% + 80px * cos(45deg));

The returned number must be used in a context that accepts a number or combined with another value to produce the required CSS data type.

Parameters

The cos() function requires one parameter.

For example:

cos(60deg)
cos(0.166667turn)
cos(1.047198rad)
cos(pi / 3)

These expressions return approximately 0.5.

Only one argument is accepted. The following is invalid:

cos(30deg, 60deg)

The argument may contain a calculation:

cos(30deg + 15deg)
cos(90deg / 2)
cos(pi / 4)

The calculation must resolve to a valid number or angle.

How It Works

Cosine is a trigonometric relationship between an angle and the horizontal component of a point on a circle.

For a circle with a radius of 1, the cosine of an angle represents the horizontal coordinate of a point measured from the center.

For example:

cos(0deg)   = 1
cos(90deg)  = 0
cos(180deg) = -1
cos(270deg) = 0
cos(360deg) = 1

These values repeat after a full revolution.

To calculate a horizontal position at a specific distance from the center, multiply the cosine by the desired radius:

.point {
  transform: translateX(calc(100px * cos(60deg)));
}

Because the cosine of 60 degrees is 0.5, the element moves 50 pixels horizontally.

Positive cosine values produce positive horizontal offsets, while negative values produce negative offsets.

The cos() function calculates a number. It does not automatically position or rotate an element.

Return Values

The cos() function returns a number between -1 and 1, inclusive.

These values are useful when converting angles into horizontal distances.

For example:

width: calc(100px * cos(60deg));

This produces a width of approximately 50 pixels.

Some calculated results may contain very small floating-point differences from their mathematical values.

If the input evaluates to infinity, negative infinity, or NaN, the function returns NaN, which may make the surrounding property value invalid.

Angle Units

The cos() function accepts CSS angle units and unitless numbers interpreted as radians.

These expressions represent the same angle:

cos(90deg)
cos(0.25turn)
cos(100grad)
cos(pi / 2)

All return approximately zero.

Be careful when using unitless values. For example, cos(90) means 90 radians, not 90 degrees.

Using with calc()

The cos() function is often combined with calc() to produce CSS lengths and other calculated values.

For example:

.example {
  width: calc(200px * cos(60deg));
}

Since the cosine of 60 degrees is 0.5, the width becomes 100 pixels.

It can also calculate positioning offsets:

.example {
  left: calc(50% + 100px * cos(45deg));
}

The result adds approximately 70.7 pixels to the 50% position.

Another example:

.example {
  transform: translateX(calc(120px * cos(135deg)));
}

Because the cosine of 135 degrees is approximately -0.707, the horizontal translation is approximately -84.9 pixels.

CSS also allows trigonometric functions in mathematical expressions without an outer calc() in some contexts. Using calc() can make the complete calculation easier to read.

Circular Positioning

The cos() and sin() functions can work together to position elements around a circle.

Cosine calculates the horizontal offset, while sine calculates the vertical offset.

For example:

.point {
  --angle: 45deg;
  --radius: 80px;
  transform: translate(
    calc(var(--radius) * cos(var(--angle))),
    calc(var(--radius) * sin(var(--angle)))
  );
}

This positions the element approximately 56.6 pixels to the right and 56.6 pixels downward from its starting position.

In CSS, positive vertical translations move downward.

For a conventional mathematical coordinate system where positive angles move counterclockwise, negate the sine component:

.point {
  transform: translate(
    calc(var(--radius) * cos(var(--angle))),
    calc(-1 * var(--radius) * sin(var(--angle)))
  );
}

Changing --angle changes the point's position around the circle without requiring JavaScript.

Element Sizing

The cos() function can calculate dimensions based on an angle.

For example, rotating a square by 45 degrees increases the width and height of its visible bounding box.

To fit a square rotated by 45 degrees inside a 100-pixel square area, its side length can be reduced using cosine:

.diamond {
  width: calc(100px * cos(45deg));
  height: calc(100px * cos(45deg));
  background-color: #0066cc;
  transform: rotate(45deg);
}

Each side becomes approximately 70.7 pixels. After the 45-degree rotation, the diamond's visible bounding box is approximately 100 pixels wide and tall.

This particular calculation applies to the 45-degree rotation. Other angles require considering both the sine and cosine contributions to the rotated bounding box.

For example, the bounding width of a rectangle rotated by an angle can be calculated from its original width and height:

bounding-width = width * abs(cos(angle)) + height * abs(sin(angle))

This illustrates how trigonometric functions can help determine the space required by rotated elements.

Using Custom Properties

CSS custom properties make trigonometric calculations reusable.

For example:

.point {
  --angle: 60deg;
  --radius: 100px;
  transform: translateX(calc(var(--radius) * cos(var(--angle))));
}

The horizontal offset is 50 pixels.

Changing the angle updates the calculation:

.point-one {
  --angle: 0deg;
}
.point-two {
  --angle: 60deg;
}
.point-three {
  --angle: 120deg;
}
.point-four {
  --angle: 180deg;
}

The same positioning rule can be reused for all four elements.

Custom properties are especially useful for circular menus, decorative arrangements, and angle-based layouts.

Example

The following example compares the widths calculated from the cosine of different angles.

HTML:

<div class="cos-demo">
  <div class="cos-demo-row">
    <span>0deg</span>
    <div class="cos-demo-bar cos-0"></div>
  </div>
  <div class="cos-demo-row">
    <span>30deg</span>
    <div class="cos-demo-bar cos-30"></div>
  </div>
  <div class="cos-demo-row">
    <span>45deg</span>
    <div class="cos-demo-bar cos-45"></div>
  </div>
  <div class="cos-demo-row">
    <span>60deg</span>
    <div class="cos-demo-bar cos-60"></div>
  </div>
  <div class="cos-demo-row">
    <span>90deg</span>
    <div class="cos-demo-bar cos-90"></div>
  </div>
</div>

CSS:

.cos-demo {
  max-width: 300px;
}
.cos-demo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.cos-demo-row span {
  width: 45px;
  flex-shrink: 0;
}
.cos-demo-bar {
  height: 24px;
  background-color: #0066cc;
}
.cos-0 {
  width: calc(200px * cos(0deg));
}
.cos-30 {
  width: calc(200px * cos(30deg));
}
.cos-45 {
  width: calc(200px * cos(45deg));
}
.cos-60 {
  width: calc(200px * cos(60deg));
}
.cos-90 {
  width: max(0px, calc(200px * cos(90deg)));
}

The bars become shorter as the cosine decreases from 1 at 0 degrees to 0 at 90 degrees.

The final bar has a calculated width of zero and is therefore not visible.

Circular Layout Example

This example positions four numbered markers around a circular area using cos() and sin().

HTML:

<div class="cos-circle">
  <span class="cos-marker marker-1">1</span>
  <span class="cos-marker marker-2">2</span>
  <span class="cos-marker marker-3">3</span>
  <span class="cos-marker marker-4">4</span>
</div>

CSS:

.cos-circle {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 20px auto;
  border: 2px solid #0066cc;
  border-radius: 50%;
}
.cos-marker {
  --radius: 75px;
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #0066cc;
  color: #fff;
  font-weight: bold;
  transform: translate(
    calc(-50% + var(--radius) * cos(var(--angle))),
    calc(-50% + var(--radius) * sin(var(--angle)))
  );
}
.marker-1 {
  --angle: 0deg;
}
.marker-2 {
  --angle: 90deg;
}
.marker-3 {
  --angle: 180deg;
}
.marker-4 {
  --angle: 270deg;
}

The four markers are positioned at the right, bottom, left, and top of the circle.

Cosine determines the horizontal offsets, while sine determines the vertical offsets. The negative 50% translations center each marker on its calculated position.

Changing the angles or radius values changes the arrangement without modifying the HTML.

cos() vs. sin()

The cos() and sin() functions are related trigonometric functions commonly used together for positioning.

For example:

.point {
  --angle: 60deg;
  --radius: 100px;
  transform: translate(
    calc(var(--radius) * cos(var(--angle))),
    calc(var(--radius) * sin(var(--angle)))
  );
}

The calculated horizontal offset is 50 pixels, and the vertical offset is approximately 86.6 pixels.

Both functions return unitless numbers between -1 and 1.

Common Uses

The cos() function is useful for angle-based calculations in CSS.

For example, a horizontal translation can be calculated using:

.item {
  --angle: 30deg;
  --distance: 120px;
  transform: translateX(calc(var(--distance) * cos(var(--angle))));
}

The resulting translation is approximately 103.9 pixels.

Limitations

The cos() function has several important rules and limitations.

• It requires exactly one argument.
• The argument must resolve to a number or angle.
• Unitless numbers are interpreted as radians, not degrees.
• The return value is always a unitless number between -1 and 1 for finite inputs.
• It does not directly return a length, percentage, or angle.
• It cannot calculate a complete two-dimensional position without an additional calculation for the other coordinate.
• Very small floating-point differences may occur in calculated results.
• Invalid calculations can cause the containing CSS declaration to become invalid.

For example, this is valid:

width: calc(100px * cos(45deg));

However, the following is invalid because the argument is a length:

width: calc(100px * cos(45px));

The following is also invalid because no argument is supplied:

width: calc(100px * cos());

Use valid angle or numeric expressions and ensure the final calculation produces a value accepted by the CSS property.

Browser Support

The CSS cos() function is Baseline Widely available. It has been supported across major browser engines since March 2023.

For a fallback, provide a conventional value before the calculated declaration:

.example {
  width: 70.7px;
  width: calc(100px * cos(45deg));
}

Browsers that do not support cos() retain the earlier width.

Feature detection can also be used:

.example {
  width: 70.7px;
}
@supports (width: calc(100px * cos(45deg))) {
  .example {
    width: calc(100px * cos(45deg));
  }
}

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

Specifications

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

The specification defines the accepted arguments, return values, and mathematical behavior of CSS trigonometric functions.

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