Firefox Tomorrow

css function

`exp()` CSS function

View on MDN ↗

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.

  • 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

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

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

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

Interactive exampleOpen the canonical MDN source to run this embedded demo.

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

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also