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

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

The pow(), sqrt(), hypot(), log(), and exp() CSS functions compute various exponential functions.

Syntax and cascade

Overview

The pow(), sqrt(), hypot(), log(), and exp() CSS functions compute various exponential functions.

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

Powered by web-features