CSS cos() Function

The cos() function is a CSS math function that calculates the cosine of a given angle.

If you remember your geometry classes, the cosine of an angle in a right triangle is the ratio of the adjacent side to the hypotenuse. In the context of CSS, you feed the cos() function an angle (like 45deg, 1rad, or 0.25turn), and it returns a unitless number between -1 and 1.

For example:

cos(0deg) returns 1
cos(90deg) returns 0
cos(180deg) returns -1

By itself, a number between -1 and 1 might not seem very useful. However, when you multiply that number by a length (like a radius), it becomes a powerful tool for positioning elements. The cos() function is most frequently paired with the sin() function to place elements perfectly along a circular path. Typically, cos() is used to calculate the X-axis (horizontal) position, while sin() handles the Y-axis (vertical) position.

Here's an example where we use cos() and sin() to position three dots around a central circle. By simply changing the angle variable, the math functions automatically calculate the correct X and Y coordinates:

.center-dot {
    width: 20px;
    height: 20px;
    background-color: #343a40;
    border-radius: 50%;
  }

.orbit-dot {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #0d6efd;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    
    /* 
      Calculate the X and Y positions using cos() and sin().
      X = radius * cos(angle)
      Y = radius * sin(angle)
    */
    --x: calc(var(--radius) * cos(var(--angle)));
    --y: calc(var(--radius) * sin(var(--angle)));
    
    /* Apply the calculated coordinates */
    transform: translate(var(--x), var(--y));
  }

/* Assign a different angle to each dot */
  .dot-1 { --angle: 0deg; }
  .dot-2 { --angle: 120deg; background-color: #198754; }
  .dot-3 { --angle: 240deg; background-color: #dc3545; }
</style>

View Output Full Screen Preview

How It Works

The cos() function takes a single calculation as its argument. This argument should resolve to an angle. If you provide a unitless number instead of an angle, the browser will treat it as radians (so cos(1) is evaluated as 1 radian).

Just like the calc() function, cos() evaluates mathematical expressions automatically. You can write equations directly inside the parentheses, like cos(var(--angle) + 90deg).

Official Syntax

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

Possible Values

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

calc-sum: A mathematical calculation that resolves to an <angle> or a <number>. The function evaluates this input and returns the corresponding cosine value as a unitless number between -1 and 1.

CSS Specifications

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