CSS pow() Function

The pow() function is a CSS math function that returns the value of a base number raised to the power of an exponent.

If you need to multiply a number by itself a specific number of times, pow() is the tool for the job. It takes two arguments: the base number and the exponent. For instance, writing pow(2, 3) is the mathematical equivalent of 2 × 2 × 2, which results in 8.

For example:

pow(3, 2) returns 9
pow(4, 0.5) returns 2 (raising to 0.5 is the same as finding the square root)
pow(10, -1) returns 0.1

One of the best real-world applications for pow() is building a modular typographic scale. Instead of manually calculating and hardcoding the font sizes for your headings and paragraphs, you can define a base size and a scale ratio. By raising that ratio to different powers, you can generate a perfectly harmonious set of font sizes directly in your stylesheet.

Here's an example demonstrating a modular scale. We set a base ratio of 1.25 (often called a "Major Third" scale). We then use the pow() function to calculate the sizes for various text elements:

.pow-container div {
    margin-bottom: 15px;
    line-height: 1.2;
  }
  
  .pow-container div:last-child {
    margin-bottom: 0;
  }

/* 
    Calculate the font sizes using pow().
    Formula: Base Size * (Ratio ^ Power)
  */
  
  /* Power of -1 (Smaller than base) */
  .text-sm {
    font-size: calc(var(--base-size) * pow(var(--ratio), -1));
    color: #6c757d;
  }

/* Power of 0 (Equals 1, so it stays at the base size) */
  .text-base {
    font-size: calc(var(--base-size) * pow(var(--ratio), 0));
  }

/* Power of 1 */
  .text-md {
    font-size: calc(var(--base-size) * pow(var(--ratio), 1));
    font-weight: 500;
  }

/* Power of 2 */
  .text-lg {
    font-size: calc(var(--base-size) * pow(var(--ratio), 2));
    font-weight: 600;
  }

/* Power of 3 */
  .text-xl {
    font-size: calc(var(--base-size) * pow(var(--ratio), 3));
    font-weight: 700;
    color: #0d6efd;
  }
</style>

<div class="pow-container">
  <div class="text-xl">Heading Extra Large (pow 3)</div>
  <div class="text-lg">Heading Large (pow 2)</div>
  <div class="text-md">Heading Medium (pow 1)</div>
  <div class="text-base">Standard body text (pow 0)</div>
  <div class="text-sm">Small caption text (pow -1)</div>
</div>

View Output Full Screen Preview

How It Works

The pow() function requires two arguments, and both must resolve to unitless numbers. If you try to pass a dimension with a unit (like 2px or 45deg) into either argument, the function will be invalid.

Because the function returns a unitless number, you'll typically need to multiply it by a unit (like rem, px, or em) inside a calc() function to actually apply it to a CSS property, just as we did in the typography example above.

Official Syntax

The official syntax of the pow() function is as follows:

Possible Values

As indicated in the official syntax, the pow() function accepts two values:

calc-sum (Base): A mathematical calculation that resolves to a unitless number. This is the base value that will be multiplied.
calc-sum (Exponent): A mathematical calculation that resolves to a unitless number. This is the exponent (or power) that the base will be raised to.

CSS Specifications

The pow() function is defined in CSS Values and Units Module Level 4 (Editor's Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.