Newly available Helpful when pow(), sqrt(), hypot(), log(), and exp() improves stylesheet organization, fallback behavior, or cascade control.

pow(), sqrt(), hypot(), log(), and exp()

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 and cascade

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
exp
120
120
118
15.4
120
15.4
Other
css.types.hypot

The hypot() CSS function is an exponential function that returns the square root of the sum of squares of its parameters.
120
120
118
15.4
120
15.4
css.types.log

The log() CSS function is an exponential function that returns the logarithm of a number.
120
120
118
15.4
120
15.4
css.types.pow

The pow() CSS function is an exponential function that returns the value of a base raised to the power of a number.
120
120
118
15.4
120
15.4
css.types.sqrt

The sqrt() CSS function is an exponential function that returns the square root of a number.
120
120
118
15.4
120
15.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
:root {
  /* Modular scale: base size × ratio^step */
  --scale-ratio: 1.25;
  --text-sm: calc(1rem / var(--scale-ratio));
  --text-base: 1rem;
  --text-lg: calc(1rem * pow(var(--scale-ratio), 1));
  --text-xl: calc(1rem * pow(var(--scale-ratio), 2));
  --text-2xl: calc(1rem * pow(var(--scale-ratio), 3));
}

.distance {
  /* Distance between two points */
  --d: hypot(var(--dx), var(--dy));
}

Live demo

Pow mojra-ske-l

pow, sqrt, hypot, log, exp Pow mojra-ske-l demo.

PreviewFullscreen

Sqrt() Sizecalculation

pow(), sqrt(), hypot(), log(), exp() Sqrt() sizecalculation demo.

PreviewFullscreen

Hypot() distance

pow(), sqrt(), hypot(), log(), exp() Hypot() distance demo.

PreviewFullscreen

Use cases

  • Maintainable CSS architecture

    Use pow(), sqrt(), hypot(), log(), and exp() to make stylesheet intent clearer in larger codebases and shared design systems.

  • Fallback management

    Control resets, imports, inheritance, or feature branches with explicit CSS rules instead of ad hoc duplication.

Cautions

  • Cascade-level tools are powerful, so misuse can make style ownership harder to understand.
  • Keep rules scoped and documented when they affect many selectors or entire stylesheets.

Accessibility

  • Global CSS controls should not accidentally remove focus, contrast, or structural cues.
  • Fallback paths should remain readable and functional, especially for assistive-technology users.

Related links