How do I handle the iPhone notch and Dynamic Island in CSS?

Use env(safe-area-inset-top) and env(safe-area-inset-bottom) for padding, with a sensible fallback value. Add viewport-fit=cover to your viewport meta tag, otherwise the insets always report zero.

Should content go behind the notch?

Backgrounds and scrolling content, yes — that is what gives a modern full-bleed look. Anything interactive or essential should stay inside the safe area, because the hardware genuinely occludes those regions.

How big are the safe area insets on a modern iPhone?

Roughly 59–62 points at the top for the Dynamic Island and 34 points at the bottom for the home indicator. Older notched models are closer to 47–50 at the top.

floow.design

Notch & Safe Area Simulator

Preview your screen against real notches and home indicators, and export the inset code for six platforms.

Preview freeFree to export safe-area code for 6 platformsNo sign-upNo watermarkRuns in your browser

Drop a screen to overlayProcessed in your browser — nothing is uploaded

DeviceShow safe area boundariesLandscapeKeyboard visible

iPhone 16 Pro Max

440 × 956 pt @3x

Safe insets: 62pt top, 34pt bottom

Cutout: Dynamic Island

Screen: 440 × 956pt
Safe top: 62pt
Safe bottom: 34pt
Usable height: 860pt

Let backgrounds run edge to edge behind the insets, but keep anything tappable inside the safe area. On this device that leaves 860pt of vertical room — worth checking a long form against before it ships.

/* iPhone 16 Pro Max — Dynamic Island, 440 × 956pt */
.screen {
  padding-top: max(62px, env(safe-area-inset-top));
  padding-right: max(0px, env(safe-area-inset-right));
  padding-bottom: max(34px, env(safe-area-inset-bottom));
  padding-left: max(0px, env(safe-area-inset-left));
}

/* Requires this in <head>, or the insets are always 0: */
/* <meta name="viewport" content="width=device-width, viewport-fit=cover"> */

Overlay your screenshot with the notch, Dynamic Island, punch-hole camera and home indicator of real devices, with the safe area boundaries drawn on.

Cheaper than discovering in review that your close button lives underneath the Dynamic Island.

What a safe area inset is

The safe area is the part of the screen guaranteed not to be covered by hardware or system UI. Insets describe how far in from each edge that boundary sits — larger at the top where the camera housing lives, and at the bottom where the home indicator sits. Both platforms expose them to your layout, and CSS reads them through env(safe-area-inset-*).

What actually breaks

Three things, repeatedly: a top-left back button colliding with the notch, a bottom action bar sitting under the home indicator, and full-bleed imagery with its subject cropped by the island. All three are invisible in a flat mockup and obvious the moment a device frame is overlaid.

Backgrounds through, controls inside

The correct pattern is to let backgrounds and scrolling content extend edge to edge behind the insets, while keeping anything interactive or essential inside the safe area. That gives you a modern full-bleed look without putting a tap target somewhere the hardware occludes.

How to use the notch & safe area simulator

Drop in a screenshot of the screen you want to check.
Select the device whose cutout you are designing against — start with a Dynamic Island model.
Keep the safe area overlay on and look for controls or text inside the red bands.
Move anything interactive out of the insets, but let backgrounds keep running edge to edge.
Copy the safe area CSS, which uses env() with your device's values as a fallback.

Use it with

Device Size Reference — Screen dimensions, density and safe areas for current handsets — searchable, and exportable as code.
Phone Mockup Generator — Drop screenshots into realistic iPhone and Android frames, then export every combination as PNG and SVG.
App Store Screenshot Sizes — Required screenshot dimensions for the App Store and Google Play, with counts and limits.

Frequently asked questions

How do I handle the iPhone notch and Dynamic Island in CSS?: Use env(safe-area-inset-top) and env(safe-area-inset-bottom) for padding, with a sensible fallback value. Add viewport-fit=cover to your viewport meta tag, otherwise the insets always report zero.
Should content go behind the notch?: Backgrounds and scrolling content, yes — that is what gives a modern full-bleed look. Anything interactive or essential should stay inside the safe area, because the hardware genuinely occludes those regions.
How big are the safe area insets on a modern iPhone?: Roughly 59–62 points at the top for the Dynamic Island and 34 points at the bottom for the home indicator. Older notched models are closer to 47–50 at the top.