CSS exp() Function

CSS exp() Function

The CSS exp() function calculates the mathematical constant e raised to a specified power, returning a unitless number.

It is part of the CSS mathematical functions and can be used to calculate exponential values for dimensions, typography, transforms, and other numeric CSS properties. The constant e is approximately 2.71828 and is the base of natural logarithms.

Syntax

exp(number)

The function accepts one calculation that resolves to a unitless number.

For example:

.box {
  width: calc(100px * exp(1));
}

Because exp(1) equals approximately 2.71828, the resulting width is approximately 271.83 pixels.

Additional examples:

exp(0)
exp(1)
exp(2)
exp(-1)
exp(0.5)
exp(1 + 1)

The function returns a CSS <number> value. It does not return a length, percentage, or angle unless the result is combined with a compatible value.

Mathematical expressions can be used inside the function without an additional calc() wrapper.

Parameters

The exp() function accepts one required parameter.

For example:

exp(2)

This calculates e squared, producing approximately 7.38906.

Positive, negative, zero, and fractional numbers are accepted.

Length values cannot be passed directly because the exponent must resolve to a number.

For example, this is invalid:

exp(2px)

Use a unitless number instead:

exp(2)

How It Works

The exp() function performs exponential calculations using the mathematical constant e.

The mathematical expression is:

exp(x) = e^x

Here, x represents the exponent and e is approximately 2.718281828459045.

For example:

exp(0) = 1
exp(1) = 2.71828
exp(2) = 7.38906
exp(3) = 20.08554

Each increase of 1 in the exponent multiplies the result by e.

Unlike linear calculations, exponential calculations grow increasingly quickly as the exponent increases.

The function is equivalent to using pow(e, number).

Exponential Values

The following table shows common results returned by exp().

The result is always positive for finite numeric inputs.

As the exponent increases, the result grows. As the exponent decreases, the result approaches zero.

These values can be used as multipliers in CSS calculations.

Negative Exponents

Negative exponents produce values between zero and one.

For example:

exp(-1) = 0.36788
exp(-2) = 0.13534
exp(-3) = 0.04979

These values are useful when a calculation needs to reduce a dimension or other numeric value.

For example:

.small-box {
  width: calc(200px * exp(-1));
}

The resulting width is approximately 73.58 pixels.

Another example:

.faded {
  opacity: exp(-1);
}

The opacity is approximately 0.36788, or 36.8%.

Negative exponents do not produce negative results. They produce positive values that approach zero.

Using exp() with calc()

The exp() function can be combined with calc() to produce values with CSS units.

For example:

.box {
  width: calc(50px * exp(1));
}

The function returns approximately 2.71828, which is multiplied by 50 pixels to produce a width of approximately 135.91 pixels.

Another example:

.heading {
  font-size: calc(1rem * exp(0.5));
}

The resulting font size is approximately 1.64872rem.

Exponential values can also be used with angles:

.rotated {
  transform: rotate(calc(10deg * exp(1)));
}

This rotates the element approximately 27.18 degrees.

The surrounding calculation determines the final unit of the value.

Using Custom Properties

CSS custom properties can provide reusable inputs for exponential calculations.

For example:

:root {
  --growth: 0.25;
  --base-size: 1rem;
}
.heading {
  font-size: calc(var(--base-size) * exp(var(--growth)));
}

The --growth property determines the exponent, while --base-size provides the starting font size.

With a growth value of 0.25, the multiplier is approximately 1.28403.

Another example:

.box {
  --exponent: 1;
  width: calc(100px * exp(var(--exponent)));
}

Changing --exponent changes the calculated width.

Custom properties make exponential calculations easier to reuse without repeating numeric values.

exp() vs. pow()

The exp() and pow() functions both perform exponential calculations.

The difference is the base used in the calculation.

For example:

exp(2)
pow(e, 2)

Both expressions return the same result.

Use exp() when the base is e. Use pow() when another base is needed.

exp() vs. log()

The exp() and log() functions are mathematical inverses when log() uses its default base e.

For example:

exp(1) = 2.71828
log(e) = 1

The exp() function raises e to a power, while log() determines the exponent needed to produce a given positive value.

Another example:

exp(log(5)) = 5
log(exp(2)) = 2

These relationships are useful when building mathematical expressions that convert between exponential and logarithmic values.

Floating-point precision may cause small differences from exact mathematical results.

Example

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

HTML:

<div class="exp-demo">
  <div class="exp-demo-row">
    <span>exp(-1)</span>
    <div class="exp-demo-bar exp-bar-small"></div>
  </div>
  <div class="exp-demo-row">
    <span>exp(0)</span>
    <div class="exp-demo-bar exp-bar-medium"></div>
  </div>
  <div class="exp-demo-row">
    <span>exp(1)</span>
    <div class="exp-demo-bar exp-bar-large"></div>
  </div>
</div>

CSS:

.exp-demo {
  max-width: 420px;
  margin: 0 auto;
}
.exp-demo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.exp-demo-row span {
  flex: 0 0 65px;
  font-size: 13px;
}
.exp-demo-bar {
  height: 28px;
  background-color: #0066cc;
}
.exp-bar-small {
  width: calc(100px * exp(-1));
}
.exp-bar-medium {
  width: calc(100px * exp(0));
}
.exp-bar-large {
  width: calc(100px * exp(1));
}

The first bar is approximately 36.79 pixels wide, the second is 100 pixels wide, and the third is approximately 271.83 pixels wide.

Each width is calculated by multiplying 100 pixels by the result of exp().

Typography Example

This example uses exponential values to create a consistent progression of font sizes.

HTML:

<div class="exp-type-demo">
  <p class="exp-type-small">Small Heading</p>
  <p class="exp-type-medium">Medium Heading</p>
  <p class="exp-type-large">Large Heading</p>
</div>

CSS:

.exp-type-demo {
  padding: 15px;
  background-color: #f2f5f9;
}
.exp-type-demo p {
  margin: 0 0 12px;
  color: #0066cc;
  line-height: 1.3;
}
.exp-type-demo p:last-child {
  margin-bottom: 0;
}
.exp-type-small {
  font-size: calc(1rem * exp(0));
}
.exp-type-medium {
  font-size: calc(1rem * exp(0.25));
}
.exp-type-large {
  font-size: calc(1rem * exp(0.5));
}

The three font sizes are approximately 1rem, 1.284rem, and 1.649rem.

Exponential scaling provides a mathematical relationship between sizes instead of relying on unrelated values.

Transform Example

The exp() function can also calculate scale factors for CSS transforms.

For example:

.scale-small {
  transform: scale(exp(-0.2));
}
.scale-normal {
  transform: scale(exp(0));
}
.scale-large {
  transform: scale(exp(0.2));
}

The resulting scale factors are approximately:

Values below 1 make the element smaller, while values above 1 make it larger.

The function can be used directly with scale() because the transform accepts unitless scale factors.

Common Uses

The exp() function is useful when CSS values need to follow an exponential relationship.

For example:

.scaled-element {
  transform: scale(exp(0.25));
}

This scales the element to approximately 128.4% of its original size.

Limitations

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

• It accepts exactly one argument.
• The argument must resolve to a unitless number.
• For finite numeric inputs, the result is always positive.
• Large positive exponents can produce very large values.
• Large negative exponents produce values approaching zero.
• The returned number must be compatible with the CSS property receiving it.
• Browser calculations may have small floating-point precision differences.
• Very large or infinite results may be constrained by the receiving property's value rules.

For example, this is valid:

width: calc(100px * exp(1));

The following is invalid because the exponent contains a length:

width: calc(100px * exp(2px));

The following is invalid because the function accepts only one argument:

width: calc(100px * exp(2, 3));

Use pow() when a separate base and exponent are needed.

Browser Support

The CSS exp() function is Baseline Widely available. It has been supported across major browser engines since December 2023.

It works in current versions of Chrome, Edge, Firefox, Safari, and other modern browsers.

For example:

.box {
  width: calc(100px * exp(1));
}

For older browsers, provide a calculated fallback before the function:

.box {
  width: 272px;
  width: calc(100px * exp(1));
}

For current compatibility information, visit Can I Use? and search for CSS exp().

Specifications

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

The specification defines exponential functions, their arguments, return values, and mathematical behavior.

Related CSS functions include pow(), log(), sqrt(), hypot(), and calc().