CSS log() function

Definition and usage

CSS log() The function returns the natural logarithm of the specified number (base E), or returns the logarithm of the specified base.

The natural constant E (2.718281828459045) is the base of the natural logarithm.

Example

Using log() Calculate width:

div.a {
  width: calc(log(50, 10) * 30px);
}
div.b {
  width: calc(log(500) * 30px);
}
div.c {
  width: calc(log(1000) * 30px);
}
div.d {
  width: calc(log(10000, 10) * 30px);
}
div.e {
  width: calc(log(50000, 10) * 30px);
}

Try it yourself

CSS syntax

log(number, base)
Value Description
number Required. Specifies the number or value to calculate the logarithm.
base Optional. Specifies the base of the logarithm. The default value is E (2.718281828459045).

Technical details

Version: CSS4

Browser support

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

Chrome Edge Firefox Safari Opera
120 120 118 15.4 106

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 mod() function

Reference:CSS pow() function

Reference:CSS sin() function

Reference:CSS sqrt() function

Reference:CSS tan() function