# pow()

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

The `exp()` function is a special case of `pow()` where the value of the base is the mathematical constant e.

## Syntax

``````/* A <number> value */
width: calc(10px * pow(5, 2)); /* 10px * 25 = 250px */
width: calc(10px * pow(5, 3)); /* 10px * 125 = 1250px */
width: calc(10px * pow(2, 10)); /* 10px * 1024 = 10240px */
``````

### Parameters

The `pow(base, number)` function accepts two comma-separated values as its parameters.

`base`

A calculation that resolves to a `<number>`, representing the base.

`number`

A calculation that resolves to a `<number>`, representing the exponent.

### Return value

Returns a `<number>` representing basenumber, that is, `base` raised to the power of `number`.

## Formal syntax

`<pow()> =   pow( <calc-sum> , <calc-sum> )  <calc-sum> =   <calc-product> [ [ '+' | '-' ] <calc-product> ]*  <calc-product> =   <calc-value> [ [ '*' | '/' ] <calc-value> ]*  <calc-value> =   <number>         |  <dimension>      |  <percentage>     |  <calc-constant>  |  ( <calc-sum> )   <calc-constant> =   e          |  pi         |  infinity   |  -infinity  |  NaN        `

## Examples

### Scale headings by fixed ratio

The `pow()` 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>
``````

#### CSS

``````h1 {
font-size: calc(1rem * pow(1.5, 4));
}
h2 {
font-size: calc(1rem * pow(1.5, 3));
}
h3 {
font-size: calc(1rem * pow(1.5, 2));
}
h4 {
font-size: calc(1rem * pow(1.5, 1));
}
h5 {
font-size: calc(1rem * pow(1.5, 0));
}
h6 {
font-size: calc(1rem * pow(1.5, -1));
}
``````

## Specifications

Specification
CSS Values and Units Module Level 4
# exponent-funcs

## Browser compatibility

BCD tables only load in the browser