CSS log() Function

CSS log() Function

The CSS log() function calculates the logarithm of a number, using the natural logarithm by default or a specified base.

It is part of the CSS Values and Units mathematical functions and can be used in numeric calculations for sizing, spacing, animation values, and other properties that accept compatible mathematical expressions.

Syntax

log(value)
log(value, base)

The function accepts a required numeric value and an optional numeric base.

For example:

log(10)
log(100, 10)
log(8, 2)
log(e)

When the base is omitted, log() calculates the natural logarithm, using Euler's number e as the base.

When a base is supplied, the function calculates the logarithm using that base.

The arguments are separated by a comma, and both must resolve to numbers.

The function returns a CSS <number> value.

Parameters

The log() function accepts one or two arguments.

For example:

log(100, 10)

The first argument is 100, and the second argument specifies base 10.

The result is 2 because 10 raised to the power of 2 equals 100.

Both arguments must be numeric and dimensionless. Lengths, percentages, and angles cannot be used directly as arguments.

How It Works

A logarithm answers the question: What exponent must a base be raised to in order to produce a particular number?

For example:

log(1000, 10)

The result is 3 because:

10 * 10 * 10 = 1000

In mathematical notation:

log(1000, 10) = 3

Another example:

log(16, 2)

The result is 4 because 2 raised to the fourth power equals 16.

Logarithms are useful for calculations where values increase multiplicatively rather than by equal additions.

For positive inputs and a valid base, the result is a finite number unless the calculation exceeds the available numeric range.

Natural Logarithm

When the base is omitted, log() calculates the natural logarithm.

The natural logarithm uses Euler's number, approximately 2.71828, as its base.

CSS provides the mathematical constant e for this value.

For example:

log(e)

The result is 1 because e raised to the power of 1 equals e.

Additional examples:

log(1)    /* 0 */
log(e)    /* 1 */
log(e * e) /* 2 */

The following expressions are equivalent:

log(10)
log(10, e)

Both calculate the natural logarithm of 10, approximately 2.302585.

Natural logarithms are commonly used in exponential calculations and mathematical models.

Custom Logarithm Base

The optional second argument allows a logarithm to use a base other than e.

For example:

log(100, 10)

The result is 2.

Base 2 logarithms are also supported:

log(32, 2)

The result is 5 because 2 raised to the fifth power equals 32.

Another example:

log(81, 3)

The result is 4 because 3 raised to the fourth power equals 81.

The base must be greater than zero and must not equal 1 for an ordinary finite real-valued logarithm.

Bases between 0 and 1 are also mathematically valid. For example:

log(0.25, 0.5)

The result is 2 because 0.5 squared equals 0.25.

Common Results

The following table shows several logarithmic calculations.

Logarithms can produce positive, negative, or zero results depending on the value and base.

For bases greater than 1, values between 0 and 1 produce negative logarithms.

Units and Return Values

The log() function returns a dimensionless number.

Its arguments must also resolve to dimensionless numbers.

For example:

width: calc(100px * log(100, 10));

Because log(100, 10) equals 2, the resulting width is 200 pixels.

The following is invalid:

width: log(100px, 10);

The first argument contains a length rather than a number.

A valid calculation can combine the numeric result with a length:

width: calc(50px * log(8, 2));

The result is 150 pixels.

CSS mathematical functions can be nested, allowing numeric calculations to contribute to length, angle, and other compatible property values.

Nested Calculations

The log() function can be combined with other CSS mathematical functions.

For example:

width: calc(50px * log(100, 10));
height: calc(20px * log(8, 2));
padding: calc(10px + 5px * log(e));

The resulting values are 100 pixels, 60 pixels, and 15 pixels respectively.

Another example combines log() with pow():

width: calc(25px * log(pow(2, 4), 2));

The inner pow(2, 4) expression produces 16. The logarithm then returns 4, resulting in a width of 100 pixels.

Custom properties can also supply arguments:

:root {
  --scale-value: 100;
}
.box {
  width: calc(40px * log(var(--scale-value), 10));
}

When the custom property equals 100, the width is 80 pixels.

Nested calculations can be useful when values are derived from configurable numeric inputs.

log() vs. pow()

The log() and pow() functions perform related mathematical operations.

For example:

log(16, 2) /* 4 */
pow(2, 4)  /* 16 */

The functions are mathematical inverses for appropriate positive values and valid bases.

Use log() when the exponent is unknown, and pow() when the exponent is known.

Example

This example uses log() to calculate the widths of three bars.

HTML:

<div class="log-demo">
  <div class="log-demo-row">
    <span>log(2, 2) = 1</span>
    <div class="log-demo-bar log-demo-one"></div>
  </div>
  <div class="log-demo-row">
    <span>log(4, 2) = 2</span>
    <div class="log-demo-bar log-demo-two"></div>
  </div>
  <div class="log-demo-row">
    <span>log(8, 2) = 3</span>
    <div class="log-demo-bar log-demo-three"></div>
  </div>
</div>

CSS:

.log-demo {
  max-width: 480px;
  margin: 0 auto;
}
.log-demo-row {
  margin-bottom: 15px;
}
.log-demo-row span {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
}
.log-demo-bar {
  height: 28px;
  background-color: #0066cc;
  border-radius: 3px;
}
.log-demo-one {
  width: calc(80px * log(2, 2));
}
.log-demo-two {
  width: calc(80px * log(4, 2));
}
.log-demo-three {
  width: calc(80px * log(8, 2));
}

The three bars have calculated widths of 80, 160, and 240 pixels.

Although the input values double from 2 to 4 to 8, the logarithmic results increase by equal amounts.

Sizing Example

This example demonstrates how logarithmic calculations can produce progressively smaller increases as the input grows.

HTML:

<div class="log-sizing-demo">
  <div class="log-sizing-item log-sizing-one">10</div>
  <div class="log-sizing-item log-sizing-two">100</div>
  <div class="log-sizing-item log-sizing-three">1000</div>
</div>

CSS:

.log-sizing-demo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 15px;
  min-height: 160px;
  padding: 15px;
  background-color: #f1f3f5;
}
.log-sizing-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 75px;
  background-color: #0066cc;
  color: #ffffff;
  border-radius: 4px 4px 0 0;
  font-size: 14px;
}
.log-sizing-one {
  height: calc(40px * log(10, 10));
}
.log-sizing-two {
  height: calc(40px * log(100, 10));
}
.log-sizing-three {
  height: calc(40px * log(1000, 10));
}

The calculated heights are 40, 80, and 120 pixels.

Each tenfold increase in the input produces the same increase in height, demonstrating logarithmic scaling.

Common Uses

The log() function is useful when CSS calculations require logarithmic relationships.

For example:

.panel {
  padding: calc(10px * log(100, 10));
}

This produces 20 pixels of padding.

For ordinary fixed dimensions, direct CSS values are usually simpler. Use logarithmic calculations when the relationship between values is important.

Limitations

The log() function has several important rules and limitations.

• The first argument is required.
• The second argument is optional and specifies the logarithm base.
• Both arguments must resolve to dimensionless numbers.
• The function returns a number, not a length or percentage.
• The logarithm of a negative number is not a finite real number.
• log(0) produces negative infinity.
• A base of 1 is undefined for logarithms.
• A negative base does not produce an ordinary real-valued logarithm.
• Invalid or non-finite calculations can affect the computed property value.
• Browser compatibility should be checked before relying on advanced mathematical functions.

For example, this is valid:

width: calc(50px * log(100, 10));

The following uses an invalid argument type:

width: calc(50px * log(100px, 10));

The following produces an undefined logarithmic result:

width: calc(50px * log(100, 1));

Use positive numeric values and a valid base to obtain predictable finite results.

Browser Support

The CSS log() function is Baseline Newly available, with support across current major browser engines beginning in 2023.

Modern versions of Chrome, Edge, Firefox, Safari, and other major browsers support CSS logarithmic calculations.

For example:

.box {
  width: calc(50px * log(100, 10));
}

Older browsers may not recognize log(). Provide a fallback declaration when compatibility is important:

.box {
  width: 100px;
  width: calc(50px * log(100, 10));
}

Browsers supporting log() use the calculated value, while unsupported browsers retain the fallback width.

For current compatibility information, visit Can I Use? and search for CSS exponential functions.

Specifications

The log() function is defined in the CSS Values and Units Module Level 4 .

The specification defines the logarithmic function, optional base argument, mathematical constants, and handling of special numeric values.

Related CSS mathematical functions include pow(), sqrt(), exp(), abs(), and sign().