exp() CSS function
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 a 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
/* A <number> value */
width: calc(100px * exp(-1)); /* 100px * 0.367879441171442 = 36.8px */
width: calc(100px * exp(0)); /* 100px * 1 = 100px */
width: calc(100px * exp(1)); /* 100px * 2.718281828459045 = 271.8px */
Parameters
The exp(number) function accepts only one value as its parameter.
Return value
Returns a non-negative <number> representing enumber, which is the result of calculating e raised to the power of number.
- If
numberis-Infinity, the result is0. - If
numberis0, the result is1. - If
numberis1, the result ise(i.e.,2.718281828459045). - If
numberisInfinity, the result isInfinity.
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
<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;
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
<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
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
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
exp()
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support