Skip to content
Related Articles

Related Articles

Table of Contents

CSS env() Function

Improve Article
Save Article
Like Article
  • 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
arrow_drop_up
Previous
CSS | calc() Function
Next

CSS | hsl() Function
Recommended Articles
Page :
How to override the CSS properties of a class using another CSS class ?
27, Sep 19
Difference between CSS Grid and CSS Flexbox
04, Mar 21
Which CSS framework is better Tailwind CSS or Bootstrap ?
28, Oct 21
How to use CSS in different dimension (CSS-in-JS) ?
29, Sep 21
CSS Cheat Sheet - A Basic Guide to CSS
28, Apr 22
CSS | rgb() Function
25, Oct 18
CSS rgba() Function
25, Oct 18
CSS | hsla() Function
25, Oct 18
CSS | hsl() Function
25, Oct 18
CSS | cubic-bezier() Function
25, Oct 18
CSS | calc() Function
25, Oct 18
CSS | attr() Function
25, Oct 18
CSS | linear-gradient() Function
29, Oct 18
CSS | radial-gradient() Function
29, Oct 18
CSS | repeating-radial-gradient() Function
31, Oct 18
CSS | repeating-linear-gradient() Function
31, Oct 18
CSS | animation-timing-function Property
18, Dec 18
CSS | var() Function
18, Dec 18
CSS repeating-conic-gradient() Function
03, Aug 21
CSS | brightness() Function
06, Aug 19
CSS | blur() Function
06, Aug 19
CSS | contrast() Function
07, Aug 19
CSS | drop-shadow() Function
07, Aug 19
CSS grayscale() Function
07, Aug 19
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
TARuN
@tarun007
Vote for difficulty





Article Tags :
Report Issue

We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!