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.

The logarithm of value, when base is defined.

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

<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        

This example shows how you can use the log() function to calculate sizes.

HTML

<div class="boxes">
  <div class="box zero">50px</div>
  <div class="box one">100px</div>
  <div class="box two">150px</div>
  <div class="box three">200px</div>
</div>

CSS

Here we are using CSS custom properties to define the sizes to be used. First, we declare the first size (--size-0), which is then used to calculate the other sizes.

• --size-1 is calculated by multiplying --size-0 (50px) by the value of log(7.389) (2) which results in 100px.
• --size-2 is calculated by multiplying --size-0 (50px) by the value of log(8, 2) (3) which results in 150px.
• --size-3 is calculated by multiplying --size-0 (50px) by the value of log(625, 5) (4) which results in 200px.

:root {
  --size-0: 50px;
  --size-1: calc(var(--size-0) * log(7.389)); /*  100px */
  --size-2: calc(var(--size-0) * log(8, 2)); /*  150px */
  --size-3: calc(var(--size-0) * log(625, 5)); /*  200px */
}

The sizes are then applied as the width and height values of the selectors.

.one {
  width: var(--size-1);
  height: var(--size-1);
}
.two {
  width: var(--size-2);
  height: var(--size-2);
}
.three {
  width: var(--size-3);
  height: var(--size-3);
}

Result

• pow()
• sqrt()
• hypot()
• exp()