CSS sin() Function

The sin() function is a CSS math function that calculates the sine of a given angle.

In trigonometry, the sine of an angle in a right triangle is the ratio of the opposite side to the hypotenuse. When you use the sin() function in CSS, you provide it with an angle (like 45deg, 1rad, or 0.25turn), and it returns a unitless number between -1 and 1.

For example:

sin(0deg) returns 0
sin(90deg) returns 1
sin(180deg) returns 0
sin(270deg) returns -1

Just like its sibling, the cos() function, sin() is highly practical for positioning elements along curves or circles. While cos() is typically used to calculate the horizontal (X-axis) position, sin() is used to calculate the vertical (Y-axis) position.

Here's an example where we use the sin() function to position a series of dots along a classic sine wave. By passing a different angle to each dot and multiplying the result by a pixel value, we can use the transform property to shift them up and down perfectly:

.wave-dot {
    width: 30px;
    height: 30px;
    background-color: #0d6efd;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    font-size: 0.7em;
    font-weight: bold;
    
    /* 
      Calculate the Y position using sin().
      We multiply by -1 so that positive angles go UP instead of DOWN.
    */
    --y: calc(sin(var(--angle)) * var(--amplitude) * -1);
    
    transform: translateY(var(--y));
  }

/* Assign a different angle to each dot along the wave */
  .dot-1 { --angle: 0deg; }
  .dot-2 { --angle: 45deg; background-color: #0dcaf0; }
  .dot-3 { --angle: 90deg; background-color: #20c997; }
  .dot-4 { --angle: 135deg; background-color: #198754; }
  .dot-5 { --angle: 180deg; background-color: #ffc107; color: black; }
  .dot-6 { --angle: 225deg; background-color: #fd7e14; }
  .dot-7 { --angle: 270deg; background-color: #dc3545; }
  .dot-8 { --angle: 315deg; background-color: #d63384; }
  .dot-9 { --angle: 360deg; background-color: #6f42c1; }
</style>

View Output Full Screen Preview

How It Works

The sin() 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 sin(1) is evaluated as 1 radian).

Because the function returns a unitless number, you will usually need to multiply it by a length unit (like px or rem) inside a calc() function to apply it to properties like margin, top, or translate.

Official Syntax

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

Possible Values

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

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

CSS Specifications

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