CSS - log() Function

Quiz

CSS log() function is a logarithmic function that returns the natural logarithm (base e 2.718) of a given number specified in the function parameter.

Syntax

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

log(number)

Parameter

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

Parameter	Description
number	It represents the value for which the natural logarithm is calculated.

Examples of CSS log() Function

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

Calculating Width with CSS log() Function

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

Example

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

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

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

        .box2 {
            background-color: #f0f0ff;
            scale: calc(1 / log(3));
        }

        .box3 {
            background-color: #031926;
            scale: calc(1 / log(4));
        }
    </style>
</head>

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

</html>

Scaling Font Sizes Using log() Function

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

Example

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

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

        .txt2 {
            font-size: calc(5px * log(512));
        }

        .txt3 {
            font-size: calc(1em * log(1024));
        }
    </style>
</head>

<body>
    <h2>CSS log() 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>

Supported Browsers

Function
log()	120	120	118	15.4	106

Print Page