CSS log() Function

The log() function is a CSS math function that calculates the logarithm of a value.

If you're familiar with exponents (or the exp() function), a logarithm is essentially the exact opposite. It tells you what power you need to raise a base number to in order to get your target value.

The log() function takes one or two arguments. The first argument is the value you want to evaluate. The second, optional argument is the base. If you don't provide a base, the browser defaults to using e (Euler's number), giving you the natural logarithm.

For web design, you'll often want to use a base of 10. For example:

log(10, 10) returns 1
log(100, 10) returns 2
log(1000, 10) returns 3

This is highly practical when you're building data visualizations, like a bar chart. If your data contains massive variations (like comparing 10 to 1,000), a standard linear scale would make the small values invisible. By using log(), you can create a logarithmic scale that keeps all the bars visible and proportional.

Here's an example where we pass raw data values (10, 100, and 1000) into the log() function using a base of 10 to calculate their widths:

.log-bar {
    background-color: #6f42c1;
    color: white;
    font-weight: bold;
    height: 40px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    border-radius: 4px;
    white-space: nowrap;
    
    /* 
      Calculate the width using a base-10 logarithm: 
      Base Width * log10(var(--val))
    */
    width: calc(var(--base-width) * log(var(--val), 10));
  }
  
  .log-bar:last-child {
    margin-bottom: 0;
  }

/* Assign raw data values to each bar */
  .bar-1 { --val: 10; background-color: #b19cd9; color: #000; }
  .bar-2 { --val: 100; background-color: #9370db; }
  .bar-3 { --val: 1000; background-color: #6f42c1; }
</style>

<div class="log-container">
  <div class="log-bar bar-1">Value: 10</div>
  <div class="log-bar bar-2">Value: 100</div>
  <div class="log-bar bar-3">Value: 1000</div>
</div>

View Output Full Screen Preview

How It Works

The log() function accepts calculations that resolve to unitless numbers. If you try to pass a dimension with a unit (like 10px), the function will be invalid.

Because the function returns a unitless number, you'll typically need to multiply it by a unit (like px, rem, or %) inside a calc() function to actually apply it to a CSS property.

Official Syntax

The official syntax of the log() function is as follows:

Possible Values

As indicated in the official syntax, the log() function accepts the following values:

calc-sum (First Argument): A mathematical calculation that resolves to a unitless number. This is the value you want to find the logarithm for. It must be strictly greater than zero.
calc-sum (Second Argument): An optional mathematical calculation representing the base of the logarithm. It must be a unitless number greater than zero, and it cannot equal 1. If omitted, the base defaults to e.

CSS Specifications

The log() function is defined in CSS Values and Units Module Level 4 (Editor's Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.