Using CSS env() Safe Area Inset for Mobile Fullscreen Camera Cutout or Notch
Oct 15, 2025Web DevelopmentComments (0)
The env() CSS function allows you to access device environment variables and is commonly used to get Android and iPhone screen safe areas, so you can add appropriate padding or margin around the camera cutout or notch. This is most useful when making a fullscreen web app or a native app that uses a webview (such as Apache Cordova or Capacitor).
The env() variables to use are the four safe-area-inset, one for each direction. Here is an example of how you can use them:
The second argument 0 is the fallback value. If there is no environment variable, the env() function will use the fallback.
You can use the inset variables on other elements and with other properties. Here's another example showing an element that hovers in the top-right corner of the screen, and will move away from the corner if there are any insets:
The reason to declare the top: 0 and right: 0 first is in case the browser is older and doesn't support env(). In that case, the declaration may fail, including the fallback provided in the function. Despite env() having something like 98% compatibility, it is always a good idea to plan for situations where it is not available.
If you want to visualize the insets using a simple HTML page, you use CSS like this:
The outer white area will be the device insets. Just make sure to go into fullscreen to test it out, using something like this JavaScript (which must be inside a user interaction like a button click):
For more in-depth information and browser compatibility, I recommend viewing the Mozilla MDN page on the env() function.
Basic Usage
The env() variables to use are the four safe-area-inset, one for each direction. Here is an example of how you can use them:
body {
padding-top: env(safe-area-inset-top, 0);
padding-right: env(safe-area-inset-right, 0);
padding-bottom: env(safe-area-inset-bottom, 0);
padding-left: env(safe-area-inset-left, 0);
}The second argument 0 is the fallback value. If there is no environment variable, the env() function will use the fallback.
You can use the inset variables on other elements and with other properties. Here's another example showing an element that hovers in the top-right corner of the screen, and will move away from the corner if there are any insets:
.hovering-element {
position: fixed;
top: 0;
right: 0;
top: env(safe-area-inset-top, 0);
right: env(safe-area-inset-right, 0);
}The reason to declare the top: 0 and right: 0 first is in case the browser is older and doesn't support env(). In that case, the declaration may fail, including the fallback provided in the function. Despite env() having something like 98% compatibility, it is always a good idea to plan for situations where it is not available.
If you want to visualize the insets using a simple HTML page, you use CSS like this:
html {
background: #fff;
}
body {
background: #aaa;
padding-top: env(safe-area-inset-top, 0);
padding-right: env(safe-area-inset-right, 0);
padding-bottom: env(safe-area-inset-bottom, 0);
padding-left: env(safe-area-inset-left, 0);
}The outer white area will be the device insets. Just make sure to go into fullscreen to test it out, using something like this JavaScript (which must be inside a user interaction like a button click):
document.body.requestFullscreen();More Reading
For more in-depth information and browser compatibility, I recommend viewing the Mozilla MDN page on the env() function.