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 basee
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-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 |
Browser compatibility
BCD tables only load in the browser