CSS pow() Function

CSS pow() Function

The CSS pow() function calculates a number raised to a specified power.

It accepts a base and an exponent, returning the result of the exponentiation. The function is useful for mathematical calculations, exponential sizing, and generating values that follow a numerical progression.

Syntax

pow(base, exponent)

The function requires two comma-separated numerical expressions.

For example:

pow(2, 3)
pow(5, 2)
pow(10, -1)
pow(9, 0.5)

These expressions calculate 8, 25, 0.1, and 3, respectively.

The function returns a numerical value that can be used within compatible CSS calculations.

For example:

.box {
  width: calc(20px * pow(2, 3));
}

The result is a width of 160 pixels because 2 raised to the third power equals 8.

The pow() function itself accepts numbers rather than CSS lengths or percentages.

Parameters

The pow() function accepts two required parameters.

For example:

pow(3, 4)

The base is 3 and the exponent is 4.

The calculation is:

3 * 3 * 3 * 3 = 81

Both parameters must resolve to numerical values. CSS lengths such as 10px cannot be passed directly as the base or exponent.

However, the numerical result can be multiplied by a CSS length in a compatible calculation.

How It Works

Exponentiation calculates a base raised to a power.

For positive integer exponents, this is equivalent to multiplying the base by itself repeatedly.

For example:

pow(2, 4)

This calculates:

2 * 2 * 2 * 2 = 16

Another example:

pow(3, 3)

This calculates:

3 * 3 * 3 = 27

Exponents can also be zero, negative, or fractional.

The function follows mathematical exponentiation rules, including special behavior for zero, negative bases, and non-finite results.

The returned number can then participate in a larger CSS mathematical expression.

Positive Exponents

A positive integer exponent indicates how many times the base is multiplied by itself.

For example:

.box {
  width: calc(10px * pow(3, 2));
}

The expression calculates 10px multiplied by 9, producing a width of 90px.

Positive exponents are useful for generating numerical progressions in which each step grows by a consistent ratio.

Negative Exponents

A negative exponent calculates the reciprocal of the base raised to the corresponding positive power.

For example:

pow(2, -1)

The result is:

1 / 2 = 0.5

Another example:

pow(2, -3)

The result is:

1 / (2 * 2 * 2) = 0.125

Negative exponents are useful for creating progressively smaller numerical values.

For example:

.box {
  opacity: pow(2, -2);
}

The calculated opacity is 0.25.

A zero base with a negative exponent produces a non-finite result, so avoid that combination when a finite CSS value is required.

Fractional Exponents

Fractional exponents can represent roots and other non-integer powers.

For example:

pow(9, 0.5)

The result is 3 because raising a non-negative number to the power of 0.5 calculates its square root.

Another example:

pow(27, 1 / 3)

This calculates the cube root of 27, producing approximately 3.

Fractional powers can also generate values between consecutive integer powers:

pow(2, 1.5)

The result is approximately 2.828.

Negative bases with non-integer exponents generally produce a non-number result in CSS calculations.

For example:

pow(-4, 0.5)

This does not produce a real-number square root.

For square roots, the dedicated sqrt() function is often easier to read.

Special Values

Several exponentiation expressions have special mathematical behavior.

For example:

pow(-3, 2)

The result is positive 9 because the negative base is multiplied by itself twice.

By comparison:

pow(-3, 3)

The result is negative 27.

Very large exponents can produce infinity, while some invalid mathematical combinations can produce NaN (Not a Number).

Such results are handled according to the CSS mathematical function rules and may be unsuitable for properties expecting ordinary finite values.

Using pow() with calc()

The pow() function can be used inside calc() to combine exponentiation with CSS lengths and other compatible values.

For example:

.box {
  width: calc(20px * pow(2, 3));
}

The calculation is:

20px * 8 = 160px

Another example:

.heading {
  font-size: calc(1rem * pow(1.25, 2));
}

This multiplies 1rem by 1.5625.

CSS math functions can be nested within other mathematical expressions.

For example:

.box {
  width: clamp(100px, calc(20px * pow(2, 3)), 300px);
}

The pow() function produces 8, the calculation produces 160px, and clamp() keeps the result between 100px and 300px.

When using exponentiation with CSS lengths, keep the base and exponent unitless and apply the resulting number to the length separately.

Exponential Scaling

Exponential scaling creates a sequence in which each value is multiplied by the same ratio.

For example, a scale with a ratio of 1.25 can be calculated using powers:

pow(1.25, 0)
pow(1.25, 1)
pow(1.25, 2)
pow(1.25, 3)

The resulting values are:

These values can be applied to font sizes:

.text-small {
  font-size: calc(1rem * pow(1.25, 0));
}
.text-medium {
  font-size: calc(1rem * pow(1.25, 1));
}
.text-large {
  font-size: calc(1rem * pow(1.25, 2));
}
.text-extra-large {
  font-size: calc(1rem * pow(1.25, 3));
}

Each step is 1.25 times the previous step.

This technique is useful for modular typography scales and consistent proportional sizing.

pow() vs. sqrt()

The pow() and sqrt() functions are related mathematical functions.

A square root can also be expressed using a fractional exponent:

pow(16, 0.5)
sqrt(16)

Both expressions produce 4.

However, pow() supports a wider range of exponentiation calculations.

For example:

pow(2, 5)

This produces 32, which is not a square-root calculation.

Use sqrt() when the purpose is specifically to calculate a square root, and pow() for general exponentiation.

Example

This example calculates the width of three horizontal bars using different exponents.

HTML:

<div class="pow-demo">
  <div class="pow-demo-row">
    <span>2² = 4</span>
    <div class="pow-demo-bar pow-demo-one"></div>
  </div>
  <div class="pow-demo-row">
    <span>2³ = 8</span>
    <div class="pow-demo-bar pow-demo-two"></div>
  </div>
  <div class="pow-demo-row">
    <span>2⁴ = 16</span>
    <div class="pow-demo-bar pow-demo-three"></div>
  </div>
</div>

CSS:

.pow-demo {
  max-width: 450px;
  padding: 20px;
  background-color: #f1f3f5;
}
.pow-demo-row {
  margin-bottom: 15px;
}
.pow-demo-row:last-child {
  margin-bottom: 0;
}
.pow-demo-row span {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
.pow-demo-bar {
  height: 24px;
  background-color: #0066cc;
}
.pow-demo-one {
  width: 40px;
  width: calc(10px * pow(2, 2));
}
.pow-demo-two {
  width: 80px;
  width: calc(10px * pow(2, 3));
}
.pow-demo-three {
  width: 160px;
  width: calc(10px * pow(2, 4));
}

The three bars have calculated widths of 40px, 80px, and 160px.

Each bar doubles in width because the exponent increases by one while the base remains 2.

Fixed-width declarations provide a visual fallback in browsers that do not support pow().

Scaling Example

This example creates a modular font-size scale using a base size of 1rem and a ratio of 1.25.

HTML:

<div class="pow-type-demo">
  <p class="pow-type-one">Step 1 - Base Size</p>
  <p class="pow-type-two">Step 2 - 1.25 Times</p>
  <p class="pow-type-three">Step 3 - 1.5625 Times</p>
</div>

CSS:

.pow-type-demo {
  padding: 20px;
  background-color: #f1f3f5;
}
.pow-type-demo p {
  margin: 0 0 15px;
  line-height: 1.4;
}
.pow-type-demo p:last-child {
  margin-bottom: 0;
}
.pow-type-one {
  font-size: 1rem;
  font-size: calc(1rem * pow(1.25, 0));
}
.pow-type-two {
  font-size: 1.25rem;
  font-size: calc(1rem * pow(1.25, 1));
}
.pow-type-three {
  font-size: 1.5625rem;
  font-size: calc(1rem * pow(1.25, 2));
}

The font sizes follow a consistent mathematical ratio rather than increasing by a fixed amount.

Using a shared ratio can help maintain proportional relationships throughout a typography system.

Common Uses

The pow() function is useful when CSS values need to follow an exponential mathematical relationship.

For example:

:root {
  --scale-ratio: 1.25;
}
.heading {
  font-size: calc(1rem * pow(var(--scale-ratio), 3));
}
.box {
  width: calc(20px * pow(2, 3));
}
.faded {
  opacity: pow(2, -2);
}

These examples use exponentiation to calculate font size, width, and opacity.

Limitations

The pow() function has several important rules and limitations.

• It requires exactly two arguments: a base and an exponent.
• Both arguments must resolve to CSS numerical values.
• CSS lengths and percentages cannot be passed directly as arguments.
• Negative bases with non-integer exponents generally produce NaN.
• A zero base with a negative exponent produces a non-finite result.
• Very large powers can produce infinity.
• The result must be compatible with the CSS property receiving it.
• Browser support is more limited than basic arithmetic with calc().
• A fallback is recommended when the calculation affects essential layout or readability.

For example, this is valid:

width: calc(10px * pow(2, 3));

The following is invalid because the base contains a CSS length:

width: pow(10px, 2);

The following is invalid because an argument is missing:

width: pow(2);

For predictable results, use finite numerical inputs and ensure that the calculated value is valid for the receiving property.

Browser Support

The CSS pow() function has Limited availability and is not Baseline across all major browsers.

It is part of the newer CSS mathematical functions and may not be supported in older browser versions.

For example:

.box {
  width: 160px;
  width: calc(20px * pow(2, 3));
}

Browsers that support pow() calculate the width using exponentiation. Browsers that do not support it retain the preceding valid declaration.

Feature detection can also be used:

@supports (width: calc(20px * pow(2, 3))) {
  .box {
    width: calc(20px * pow(2, 3));
  }
}

The @supports rule checks whether the browser accepts the specified declaration.

For current compatibility information, visit Can I Use? and search for CSS pow() or CSS exponential functions.

Specifications

The pow() function is defined in the CSS Values and Units Module Level 4 .

The specification defines exponential mathematical functions, numerical calculations, and how their results are evaluated in CSS.

Related CSS functions include sqrt(), exp(), log(), hypot(), and calc().