What is CSS Safe Area Insets Generator?
Safe-area insets are CSS environment variables that help keep content away from phone notches, rounded screen corners, home indicator areas, and other display cutouts. They are useful for mobile web apps, fixed headers, sticky bottom bars, and full-bleed layouts.
quickAnswer
Generate CSS padding, margin, or position offset rules using env(safe-area-inset-*) with fallback values. This keeps content away from phone notches, rounded screen corners, and home indicators on modern mobile devices.
Last updated: 2026-06-11
limitations
- Safe-area inset variables are only relevant on notched mobile devices and phones with rounded corners or home indicators. Desktop and older mobile browsers return zero for all safe-area values.
- A fallback value is essential. Without a fallback, browsers that do not support env() variables will use the default of zero, which can cause content to overlap with page edges.
- The viewport-fit=cover meta tag must be present in the HTML head for safe-area variables to produce the intended effect on iOS Safari. Without it, the page may letterbox.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
How to use this tool
- Choose whether you want to generate padding, margin, or inset rules.
- Set a fallback value for browsers and screens that do not need special safe-area spacing.
- Enter the selector that should receive the safe-area spacing.
- Copy the meta viewport tag and CSS into your page, then test on a mobile device or simulator.
What you can use it for
- Keep fixed headers and bottom bars away from screen cutouts.
- Add safe padding to mobile web apps.
- Create reusable CSS variables for safe-area spacing.