log() CSS function
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2023.
The log() CSS function is an exponential function that returns the logarithm of a number.
Logarithm 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 taken the log of. 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 baseeis 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-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
Examples
Using the log() function on a logarithmic scale
This example illustrates how the log() function can be used to visualize data values by using a logarithmic scale. The width of each bar in this example is relative to its data value on a logarithmic scale with base 10. On each element, its value is assigned to a CSS custom property named --value, which is then used by the .bar class to calculate its width.
HTML
<div class="bar" style="--value: 50">50</div>
<div class="bar" style="--value: 100">100</div>
<div class="bar" style="--value: 500">500</div>
<div class="bar" style="--value: 10000">10,000</div>
<div class="bar" style="--value: 2000000">2,000,000</div>
CSS
.bar {
width: calc(log(var(--value), 10) * 2em);
}
Result
Specifications
| Specification |
|---|
| CSS Values and Units Module Level 4 # exponent-funcs |