exp()

The CSS exp() function lets you raise the e constant (around 2.71828) to the power of a given number. For example, exp(4) is equal to e⁴. It’s pretty much the same as pow(e, number).

.element {
  font-size: calc(1rem * exp(1.5));
}

The constant e is the base of natural logarithms and exponential functions. It is also an irrational number, meaning it can’t be represented as the ratio of two integers and has infinite non-repeating decimals. Thus, the spec caps it to be 2.7182818284590452354.

The exp() function is defined in the CSS Values and Units Module Level 4 specification, which is currently in Editor’s Draft status.

Syntax

exp( <calc-sum> )

Arguments

/* Can be an integer. This returns 148.41316 */
height: calc(1px * exp(5));
/* Can even an e or pi value. This returns 15.15426 */
height: calc(1px * exp(pi));
/* Can be a decimal. This returns 3.62293 */
height: calc(1px * exp(1.3));
/* Can be even be calc expression. */
height: calc(1px * exp(1/2 + 0.33));

The exp() function takes a <calc-sum> value, which accepts anything that would normally go inside the calc() function. This represents the calculations involving sum (+), subtraction (-), multiplication (*), and division (/). The eventual result of <calc-sum> is an acceptable CSS value.

Just remember to use numerical values, (5, 0.75, pi), since a length or percentage would render the function invalid.

Basic usage

The exp() function can be used for animations that get exponentially faster as they progress. For example, we can increase the speed of an element’s transition so that it goes faster and faster with the exp() function:

/* Don't forget this to animate custom properties */
@property --step {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}
.box {
  transform: rotate(calc(90deg * exp(var(--step))));
}
@keyframes spin {
  70%,
  100% {
    --step: 3;
  }
}

Remember to multiply the exp() result with a length unit so it returns an acceptable value for the rotate() function.

We can also take advantage of exponential functions for other types of animations. For example, check out the progress bar below: the bar is filled up according to the value passed into exp().

Other uses for this include graphs, complex math equations, and CSS-only games.

Demo

Here is a demo where you can exponentially increase an element’s font-size of the text e^x:

Specification

The exp() function is defined in the CSS Values and Units Module Level 4 specification, which is currently in Editor’s Draft status. That means the information can change between now and when it formally becomes a Candidate Recommendation.

Browser support