exp()

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The exp() CSS function is an exponential function that takes an number as an argument and returns the mathematical constant e raised to the power of the given number.

The mathematical constant e is the base of natural logarithms, and is approximately 2.718281828459045.

The exp(number) function contains a calculation which returns the same value as pow(e, number).

Syntax

css
/* A <number> value */
width: calc(100px * exp(-1)); /* 100px * 0.367879441171442 = 36px */
width: calc(100px * exp(0)); /* 100px * 1 = 100px */
width: calc(100px * exp(1)); /* 100px * 2.718281828459045 = 217px */

Parameters

The exp(number) function accepts only one value as its parameter.

number

A calculation which resolves to a <number>. Representing the value to be raised by a power of e.

Return value

Returns a non-negative <number> representing enumber, which is the result of calculating e raised to the power of number.

  • If number is -Infinity, the result is 0.
  • If number is 0, the result is 1.
  • If number is 1, the result is e (i.e. 2.718281828459045).
  • If number is Infinity, the result is Infinity.

Formal syntax

<exp()> = 
  exp( <calc-sum> )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

Examples

Rotate elements

The exp() function can be used to rotate elements as it return a <number>.

HTML

html
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>

CSS

css
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(calc(1turn * exp(-1))); // 0.3678794411714423turn
}
div.box-2 {
  transform: rotate(calc(1turn * exp(-0.75))); // 0.4723665527410147turn
}
div.box-3 {
  transform: rotate(calc(1turn * exp(-0.5))); // 0.6065306597126334turn
}
div.box-4 {
  transform: rotate(calc(1turn * exp(-0.25))); // 0.7788007830714049turn
}
div.box-5 {
  transform: rotate(calc(1turn * exp(0))); // 1turn
}

Result

Scale headings by fixed ratio

The exp() function can be useful for strategies like CSS modular scale, which relates all the font-sizes on a page to each other by a fixed ratio.

HTML

html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

CSS

css
h1 {
  font-size: calc(1rem * exp(1.25)); // 3.4903429574618414rem
}
h2 {
  font-size: calc(1rem * exp(1)); // 2.718281828459045rem
}
h3 {
  font-size: calc(1rem * exp(0.75)); // 2.117000016612675rem
}
h4 {
  font-size: calc(1rem * exp(0.5)); // 1.6487212707001282rem
}
h5 {
  font-size: calc(1rem * exp(0.25)); // 1.2840254166877414rem
}
h6 {
  font-size: calc(1rem * exp(0)); // 1rem
}

Result

Specifications

Specification
CSS Values and Units Module Level 4
# exponent-funcs

Browser compatibility

BCD tables only load in the browser

See also