CSS - exp() Function

Quiz

CSS exp() function is an exponential function that returns the value of Euler's number (e 2.718) raised to the power of a given number specified in the parameter of the function.

Syntax

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

exp(number)

Parameter

CSS exp() function accepts one required parameter as given below:

Parameter	Description
number	It represents the exponent to which (e) is raised.

Examples of CSS exp() Function

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

Calculating Width with CSS exp() Function

In this example, we use the exp() function to set the width of div containers dynamically.

Example

<!DOCTYPE html>
<html lang="en">

<head>
    <title>CSS exp() Function</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            display: inline-block;
            margin: 10px;
        }

        .box1 {
            background-color: #04af2f;
            scale: calc(1 / exp(2));
        }

        .box2 {
            background-color: #031926;
            scale: calc(1 / exp(1));
        }

        .box3 {
            background-color: #3357ff;
            scale: calc(1 / exp(0.5));
        }
    </style>
</head>

<body>
    <h2>CSS exp() Function</h2>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>

Scaling Font Sizes Using exp() Function

In this example, we use the exp() function to set a dynamic font size of paragraphs.

Example

<!DOCTYPE html>
<html lang="en">

<head>
    <title>CSS exp() Function</title>
    <style>
        .txt1 {
            font-size: calc(4px * exp(2));
        }

        .txt2 {
            font-size: calc(2.5px * exp(3));
        }

        .txt3 {
            font-size: calc(1.5px * exp(4));
        }
    </style>
</head>

<body>
    <h2>CSS exp() Function</h2>
    <p class="txt">This is paragraph 1</p>
    <p class="txt2">This is paragraph 2</p>
    <p class="txt3">This is paragraph 3</p>
</body>

</html>

Supported Browsers

Function
exp()	120	120	118	15.4	106

Print Page