CSS sin() Function

CSS sin() Function

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

It is commonly used with calc() to calculate element positions, dimensions, and movement based on angles. The function accepts angles in degrees, radians, turns, or gradians, as well as unitless numbers interpreted as radians.

Syntax

sin(angle)

The sin() function accepts one calculation that resolves to an angle or a number.

Examples:

sin(0deg)
sin(30deg)
sin(45deg)
sin(90deg)
sin(0.25turn)
sin(pi / 2)

The function returns a unitless number, which can be multiplied by a length, time, or another compatible CSS value.

For example:

width: calc(100px * sin(30deg));
height: calc(100px * sin(60deg));
transform: translateY(calc(80px * sin(90deg)));
animation-duration: calc(2s * sin(30deg));

In these examples, sin() supplies a numeric multiplier for the surrounding calculation.

The function can be used directly where a CSS property accepts a number:

opacity: sin(30deg);

Because sin(30deg) returns 0.5, the resulting opacity is 50%.

Parameters

The sin() function requires exactly one argument.

Valid angle units include:

• deg - Degrees
• rad - Radians
• turn - Turns
• grad - Gradians

Unitless numbers are interpreted as radians.

For example, the following expressions produce approximately the same result:

sin(90deg)
sin(0.25turn)
sin(1.570796rad)
sin(pi / 2)

Each returns approximately 1.

The function also accepts compatible calculations:

sin(30deg + 15deg)
sin(180deg / 2)
sin(var(--angle))

The argument must resolve to an appropriate numeric type. A length such as 20px cannot be used as the angle.

Return Values

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

These values describe the vertical coordinate of a point on a unit circle using conventional mathematical coordinates.

For angles between 0 and 180 degrees, the sine is nonnegative. Between 180 and 360 degrees, it is nonpositive.

CSS calculations may produce very small floating-point differences around values that are mathematically zero.

How It Works

The sine of an angle describes the relationship between an angle and the vertical component of a point on a circle.

For a circle with a radius of 1, the sine gives the vertical coordinate of a point at the specified angle.

For example:

sin(30deg)

The result is 0.5.

When multiplied by a length of 100px:

height: calc(100px * sin(30deg));

The calculated height is 50px.

Similarly:

height: calc(100px * sin(90deg));

The calculated height is 100px.

The function evaluates the angle and returns its sine. It does not rotate or move an element by itself.

To produce visible movement, use the returned number in a property such as transform, top, or left.

Angle Units

CSS supports several angle units, and sin() can use any of them.

The following expressions are equivalent:

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

All return 1.

Unitless Numbers

When a unitless number is supplied, it represents an angle in radians.

sin(1)

This calculates the sine of 1 radian, approximately 0.8415.

It does not calculate the sine of 1 degree.

For beginners, using an explicit angle unit such as deg makes the intended calculation easier to understand.

Using sin() in Calculations

The sin() function can be combined with CSS mathematical expressions to calculate dimensions and offsets.

Calculating Width

.item {
  width: calc(200px * sin(30deg));
}

The calculated width is 100px.

Calculating Height

.item {
  height: calc(100px * sin(60deg));
}

The calculated height is approximately 86.6px.

Calculating Translation

.item {
  transform: translateY(calc(80px * sin(90deg)));
}

The element moves 80px downward.

Using a Negative Result

.item {
  transform: translateY(calc(80px * sin(270deg)));
}

Because sin(270deg) returns -1, the element moves 80px upward.

Using clamp()

.item {
  width: clamp(50px, calc(150px * sin(45deg)), 120px);
}

The sine calculation produces approximately 106.07px, which falls within the permitted range.

The final width is approximately 106.07px.

When calculating dimensions, remember that negative results may be invalid for properties such as width and height. Use abs(), max(), or another suitable expression when a nonnegative value is required.

sin() vs. cos()

The sin() and cos() functions are closely related trigonometric functions.

In conventional mathematical coordinates, cosine represents the horizontal component of a point on a unit circle, while sine represents the vertical component.

Both functions can be used together to calculate positions around a circle.

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

For an angle of 45 degrees, both translation components are approximately 56.57px.

In CSS, positive horizontal translation moves an element right, and positive vertical translation moves it down.

To follow conventional mathematical coordinates, where positive vertical values point upward, multiply the sine component by -1.

CSS Custom Properties

CSS custom properties can store angles and distances used in sin() calculations.

For example:

.item {
  --angle: 60deg;
  --distance: 100px;
  transform: translateY(calc(var(--distance) * sin(var(--angle))));
}

The calculated translation is approximately 86.6px downward.

Changing --angle changes the translation without requiring a different CSS declaration.

Providing a Fallback

Use @supports when supporting older browsers.

.item {
  transform: translateY(50px);
}
@supports (transform: translateY(calc(100px * sin(30deg)))) {
  .item {
    transform: translateY(calc(100px * sin(var(--angle, 30deg))));
  }
}

The fallback uses a fixed translation of 50px.

In supporting browsers, the translation is calculated from the custom angle, with 30deg as its default.

Example

The following example uses sin() to calculate the widths of three boxes.

HTML:

<div class="sin-demo">
  <div class="sin-item" style="--angle: 30deg;">30deg</div>
  <div class="sin-item" style="--angle: 45deg;">45deg</div>
  <div class="sin-item" style="--angle: 90deg;">90deg</div>
</div>

CSS:

.sin-demo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sin-item {
  box-sizing: border-box;
  width: 100px;
  padding: 12px 8px;
  color: #fff;
  background-color: #3498db;
  text-align: center;
}
@supports (width: calc(200px * sin(30deg))) {
  .sin-item {
    width: calc(200px * sin(var(--angle)));
  }
}

The calculated widths are 100px, approximately 141.42px, and 200px.

Each box uses the same CSS declaration with a different angle supplied through a custom property.

In browsers without sin() support, the boxes use the fallback width of 100px.

Positioning Example

The following example uses sin() to move boxes vertically according to their angles.

HTML:

<div class="sin-position-demo">
  <div class="sin-position-item" style="--angle: 90deg;">90deg</div>
  <div class="sin-position-item" style="--angle: 180deg;">180deg</div>
  <div class="sin-position-item" style="--angle: 270deg;">270deg</div>
</div>

CSS:

.sin-position-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  min-height: 180px;
}
.sin-position-item {
  box-sizing: border-box;
  width: 80px;
  padding: 12px 5px;
  color: #fff;
  background-color: #2e86c1;
  text-align: center;
}
@supports (transform: translateY(calc(50px * sin(90deg)))) {
  .sin-position-item {
    transform: translateY(calc(50px * sin(var(--angle))));
  }
}

The 90-degree box moves 50px downward, the 180-degree box remains at its original vertical position, and the 270-degree box moves 50px upward.

This demonstrates how positive, zero, and negative sine values affect CSS translations.

Unlike relative positioning, transforms do not change the element's normal layout position.

Circular Positioning Example

The following example combines sin() and cos() to position four elements around the center of a container.

HTML:

<div class="sin-circle-demo">
  <div class="sin-circle-center">Center</div>
  <div class="sin-circle-item" style="--angle: 0deg;">1</div>
  <div class="sin-circle-item" style="--angle: 90deg;">2</div>
  <div class="sin-circle-item" style="--angle: 180deg;">3</div>
  <div class="sin-circle-item" style="--angle: 270deg;">4</div>
</div>

CSS:

.sin-circle-demo {
  position: relative;
  width: 260px;
  height: 260px;
  max-width: 100%;
  margin: 15px auto;
  border: 1px dashed #aaa;
  border-radius: 50%;
}
.sin-circle-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
}
.sin-circle-item {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  background-color: #3498db;
  transform: translate(-50%, -50%);
}
@supports (transform: translateX(calc(80px * cos(0deg)))) {
  .sin-circle-item {
    transform: translate(
      calc(-50% + 85px * cos(var(--angle))),
      calc(-50% + 85px * sin(var(--angle)))
    );
  }
}

The four elements are positioned to the right, bottom, left, and top of the center.

The cos() function calculates horizontal movement, while sin() calculates vertical movement.

Both values are multiplied by the 85px radius to determine each element's distance from the center.

The -50% translation compensates for each item's own dimensions so that its center follows the calculated position.

This technique can be used for circular menus, decorative arrangements, and other radial layouts.

Common Uses

The sin() function is useful whenever a CSS value depends on an angle.

• Circular positioning: Calculate vertical positions for elements arranged around a circle.
• Transforms: Determine horizontal or vertical translations from angles.
• Dynamic dimensions: Calculate widths and heights using trigonometric relationships.
• Radial layouts: Combine sine and cosine to position items around a center point.
• Custom properties: Reuse angle values across multiple calculations.
• Mathematical styling: Use sine values as multipliers for compatible CSS dimensions and other numeric properties.
• Angle-based effects: Calculate offsets and proportions that vary with an angle.

For example, a component can use a custom angle to calculate its vertical offset:

.item {
  --angle: 45deg;
  --radius: 100px;
  transform: translateY(calc(sin(var(--angle)) * var(--radius)));
}

The resulting translation is approximately 70.71px downward.

Changing the angle updates the calculated offset.

Limitations

The sin() function has several requirements and behaviors to consider.

• It requires exactly one argument.
• The argument must resolve to an angle or a number.
• Unitless numbers are interpreted as radians.
• The result is a unitless number between -1 and 1.
• The function does not return an angle or a length.
• It does not move or rotate an element unless its result is used in an appropriate CSS property.
• Negative sine results can make certain calculated dimensions invalid.
• Floating-point calculations may produce small differences from mathematically exact values.
• Inputs of positive infinity, negative infinity, or NaN produce NaN.
• Negative zero is preserved when the argument is negative zero.
• Calculations must use compatible CSS numeric types.
• Older browser versions may not support the function.

Valid and Invalid Arguments

The following declarations use valid arguments:

width: calc(100px * sin(45deg));
height: calc(100px * sin(pi / 2));
transform: translateY(calc(50px * sin(0.25turn)));

The following declaration is invalid because a length cannot be used as the argument:

width: calc(100px * sin(20px));

The following is invalid because the function accepts only one argument:

width: calc(100px * sin(30deg, 60deg));

Negative Dimensions

Consider the following calculation:

width: calc(100px * sin(270deg));

Because sin(270deg) returns -1, the calculated width is -100px.

Negative widths are not permitted, so this declaration does not produce a usable negative width.

When a nonnegative value is required, use an expression such as:

width: calc(100px * abs(sin(270deg)));

This produces a width of 100px.

Feature Detection

Use @supports to provide a fallback when supporting older browsers.

.item {
  width: 100px;
}
@supports (width: calc(100px * sin(30deg))) {
  .item {
    width: calc(200px * sin(var(--angle, 30deg)));
  }
}

In supporting browsers, the width is calculated using the sine of the supplied angle.

In older browsers, the element retains its fallback width of 100px.

Browser Support

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

Support includes modern versions of Chrome, Edge, Firefox, and Safari.

Older browsers may not support CSS trigonometric functions. Provide a fallback when calculations are essential to a layout.

For current compatibility information, visit Can I Use? and search for sin().

Specifications

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

The specification defines the accepted argument types, the numeric return value, and how trigonometric functions are evaluated in CSS mathematical expressions.

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