# exp()

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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 represents Euler's number and 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

``````/* 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 */
``````

### Parameter

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-constant>  |  ( <calc-sum> )   <calc-constant> =   e          |  pi         |  infinity   |  -infinity  |  NaN        `

## Examples

### Rotate elements

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

#### 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

``````div.box {
width: 100px;
height: 100px;
}
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
}
``````

### 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

``````<h1>Heading 1</h1>
``````

#### 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
}
``````

## Specifications

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

## Browser compatibility

BCD tables only load in the browser