CSS Function - pow()

Quiz

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

Syntax

The syntax for the CSS pow() function is as follows:

pow(base, exponent)

Parameters

CSS pow() function accepts two required parameters as listed below:

Parameter	Description
base	It represents a number that you want to raise to any power.
exponent	It represents a number by which you raise the base.

Examples of CSS pow() Function

The following examples illustrate the use of the CSS pow() function in various scenarios.

Scaling Font Sizes Using pow()

In this example, we use the pow() function to scale the font sizes for different paragraphs.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS pow() Function Example</title>
    <style>
        p {
            font-family: Verdana, sans-serif;
        }
        .txt1 {
            font-size: calc(4px * pow(2, 2));
        }
        .txt2 {
            font-size: calc(2px * pow(2, 4));
        }
        .txt3 {
            font-size: calc(3px * pow(4, 2));
        }
    </style>
</head>
<body>
    <h2>CSS pow() Function</h2>
    <p class="txt1">This is Paragraph 1.</p>
    <p class="txt2">This is Paragraph 2.</p>
    <p class="txt3">This is Paragraph 3.</p>
</body>
</html>

Calculating Width of Containers

In this example, we use the pow() function to set the width of a container.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS pow() Function Example</title>
    <style>
        .container {
            width: calc(10px * pow(2, 3)); 
            height: 50px;
            background-color: #04af2f;
        }
        .container2 {
            width: calc(2em * pow(3, 2)); 
            height: 50px;
            background-color: #031926;
        }
    </style>
</head>
<body>
    <h2>CSS pow() Function</h2>
    <div class="container"></div>
    <br>
    <div class="container2"></div>
</body>
</html>

Supported Browsers

Function
pow()	120	120	118	15.4	106

Print Page