CSS env() Function

Last Updated : 30 Aug, 2024

The env() function is used to insert the value of a user agent-defined environment variable into your CSS. It is almost the same as var() in CSS except these values are user-agent-defined rather than user-defined. These variables are globally scoped.

Syntax:

env( <custom-ident> , <declaration-value> )

Note: Please note that env() property values are case-sensitive.

Property values:

SAFE-AREA-INSET-TOP: It defines the top of the rectangle from the edge of the viewport.

Syntax:

env(SAFE-AREA-INSET-TOP,Integer_value)

Example: This example shows the use of the CSS env() Function.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">

    <style>
        p {
            background-color: green;
            width: fit-content;
            color: white;
            font-size: 20px;
            border: env(SAFE-AREA-INSET-TOP,
                    5px) solid black;
            padding: 10px;
            padding: env(SAFE-AREA-INSET-TOP, 50px) 
                       env(safe-area-inset-right, 50px) 
                       env(safe-area-inset-bottom, 50px) 
                       env(safe-area-inset-left, 50px)
        }
    </style>
</head>

<body>
    <h2>50px padding from top</h2>

    <p>Geeks for geeks</p>
</body>
</html>

Output:

SAFE-AREA-INSET-RIGHT: It defines the right of the rectangle from the edge of the viewport.

Syntax:

env(SAFE-AREA-INSET-RIGHT,Integer_value);

Example: This example shows the use of the CSS env() Function.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">

    <style>
        p {
            background-color: green;
            width: fit-content;
            color: white;
            font-size: 20px;
            border:env(SAFE-AREA-INSET-TOP, 5px) solid black;
            padding: 10px;
            padding: env(safe-area-inset-top, 50px) 
                     env(SAFE-AREA-INSET-RIGHT, 50px) 
                     env(safe-area-inset-bottom, 50px) 
                     env(safe-area-inset-left, 50px)
        }
    </style>
</head>

<body>
    <h2>50px padding from right</h2>
   
    <p>Geeks for geeks</p>
</body>
</html>

Output:

SAFE-AREA-INSET-LEFT: It defines the left of the rectangle from the edge of the viewport.

Syntax:

env(SAFE-AREA-INSET-LEFT,Integer_value);

Example: This example shows the use of the CSS env() Function.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">

    <style>
        p {
            background-color: green;
            width: fit-content;
            color: white;
            font-size: 20px;
            border:env(SAFE-AREA-INSET-TOP, 5px) solid black;
            padding: 10px;
            padding: env(safe-area-inset-top, 50px) 
                     env(safe-area-inset-bottom, 50px) 
                     env(safe-area-inset-right, 50px) 
                     env(SAFE-AREA-INSET-LEFT, 50px)
        }
    </style>
</head>

<body>
    <h2>50px padding from left</h2>

    <p>Geeks for geeks</p>
</body>
</html>

Output:

SAFE-AREA-INSET-BOTTOM: It defines the bottom of the rectangle from the edge of the viewport.

Syntax:

env(SAFE-AREA-INSET-BOTTOM,Integer_value);

Example: This example shows the use of the CSS env() Function.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">

    <style>
        p {
            background-color: green;
            width: fit-content;
            color: white;
            font-size: 20px;
            border:env(SAFE-AREA-INSET-TOP, 5px) solid black;
            padding: 10px;
            padding: env(safe-area-inset-top, 50px) 
                      env(safe-area-inset-left, 50px) 
                       env(SAFE-AREA-INSET-BOTTOM, 50px) 
                     env(safe-area-inset-right, 50px)
        }
    </style>
</head>

<body>
    <h2>50px padding from bottom</h2>
    
    <p>Geeks for geeks</p>
</body>
</html>