CSS sin() function

Definition and usage

CSS sin() The function returns the sine value of a number (angle).

The sine value of an angle always returns a value between -1 and 1.

example

in calc() function used in sin() To set the width and height of three <div> elements:

div.a {
  width: calc(sin(0.25turn) * 120px);
  height: calc(sin(30deg) * 120px);
  background-color: salmon;
  margin-bottom: 25px;
}
div.b {
  width: calc(sin(90) * 120px);
  height: calc(sin(2*1.125) * 120px);
  background-color: green;
  margin-bottom: 25px;
}
div.c {
  width: calc(sin(pi/2) * 120px);
  height: calc(sin(pi/2) * 120px);
  background-color: maroon;
}

Try it yourself

CSS syntax

sin(angle)

Technical details

Browser support

The numbers in the table represent the first browser version to fully support this function.

Related pages

Reference:CSS acos() function

Reference:CSS asin() function

Reference:CSS atan() function

Reference:CSS atan2() function

Reference:CSS calc() function

Reference:CSS cos() function

Reference:CSS exp() function

Reference:CSS hypot() function

Reference:CSS log() function

Reference:CSS mod() function

Reference:CSS pow() function

Reference:CSS sqrt() function

Reference:CSS tan() function