W3cubDocs

log()

The log() CSS function is an exponential function that returns the logarithm of a number.

The logarithm, or log, is the inverse of exponentiation; it is the number that a fixed base has to be raised to in order to yield the number passed as the first parameter.

In CSS, when a single parameter is passed, the natural logarithm e, or approximately 2.7182818, is used, though the base can be set to any value with an optional second parameter.

Syntax

/* A <number> value */
width: calc(100px * log(7.389)); /* 200px */
width: calc(100px * log(8, 2)); /* 300px */
width: calc(100px * log(625, 5)); /* 400px */

Parameters

The log(value [, base]?) function accepts two comma-separated values as its parameters.

value: A calculation which resolves to a <number> greater than or equal to 0. Representing the value to be logarithmed.
base: Optional. A calculation which resolves to a <number> greater than or equal to 0. Representing the base of the logarithm. If not defined, the default logarithmic base e is used.

Return value

The logarithm of value, when base is defined.

The natural logarithm (base e) of value, when base is not defined.

Formal syntax

<log()> = 
  log( <calc-sum> , <calc-sum>? )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>         |
  <dimension>      |
  <percentage>     |
  <calc-constant>  |
  ( <calc-sum> )   

<calc-constant> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

Specifications

Specification
CSS Values and Units Module Level 4 # exponent-funcs

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`log`	No	No	112	No	No	15.4	No	No	112	No	15.4	No