CSS exp() Function

The exp() function is a CSS math function that calculates e raised to the power of a given number.

In mathematics, e represents Euler's number, a mathematical constant approximately equal to 2.718281828459045. It's the base rate of growth shared by all continually growing processes. When you pass a value into the exp() function, the browser multiplies e by itself that many times.

For example:

exp(0) returns 1
exp(1) returns approximately 2.718
exp(2) returns approximately 7.389
exp(3) returns approximately 20.085

While you might not use this for standard web layouts, it's a fantastic tool for creating exponential scales, physics-based animations, or non-linear sizing directly in your stylesheet. Instead of manually calculating exponential steps or using JavaScript, you can let CSS handle the math.

Here's an example demonstrating exponential growth. We have four bars, and we pass a simple sequence of numbers (0, 1, 2, and 3) into the exp() function to determine their widths. Notice how quickly the width scales up:

.exp-bar {
    background-color: #0dcaf0;
    color: #000;
    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: 
      Base Width * e^(var(--val))
    */
    width: calc(var(--base-width) * exp(var(--val)));
  }
  
  .exp-bar:last-child {
    margin-bottom: 0;
  }

/* Assign a simple sequential number to each bar */
  .bar-1 { --val: 0; }
  .bar-2 { --val: 1; background-color: #0bacce; color: white; }
  .bar-3 { --val: 2; background-color: #088da8; color: white; }
  .bar-4 { --val: 3; background-color: #056e82; color: white; }
</style>

View Output Full Screen Preview

How It Works

The exp() function takes a single calculation as its argument. This argument must resolve to a unitless number. If you try to pass a dimension (like 10px or 45deg), 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, just like we did in the example above.

Official Syntax

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

Possible Values

As indicated in the official syntax, the exp() function accepts the following value:

calc-sum: A mathematical calculation that resolves to a unitless <number>. The function evaluates this input and returns e raised to that power.

CSS Specifications

The exp() 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.