log()
Baseline
2023
Newly available
Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
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> |