CSS env() Function

Last Updated : 18 Jul, 2020

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:

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:

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:

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:

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>

Output:

Supported browsers:

Chrome
Edge
Firefox
Safari
Opera

My Personal Notes

Related Articles

HTML

HTML

HTML

HTML