Safe Area Inset Calculator

Select Device

Safe Area Insets

/* Safe area insets with fallbacks */
@supports (padding: env(safe-area-inset-top)) {
  .safe-area-top {
    padding-top: env(safe-area-inset-top);
  }

  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .safe-area-left {
    padding-left: env(safe-area-inset-left);
  }

  .safe-area-right {
    padding-right: env(safe-area-inset-right);
  }

  .safe-area-all {
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
  }
}

Safe Area with Additional Padding

.safe-area-with-padding {
  padding-top: max(16px, env(safe-area-inset-top));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
}

/* Tailwind-style safe area utilities */
.pt-safe {
  padding-top: env(safe-area-inset-top);
}

.pr-safe {
  padding-right: env(safe-area-inset-right);
}

.pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}

.pl-safe {
  padding-left: env(safe-area-inset-left);
}

.p-safe {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

/* Margin utilities */
.mt-safe {
  margin-top: env(safe-area-inset-top);
}

.mr-safe {
  margin-right: env(safe-area-inset-right);
}

.mb-safe {
  margin-bottom: env(safe-area-inset-bottom);
}

.ml-safe {
  margin-left: env(safe-area-inset-left);
}

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Add viewport-fit=cover to enable safe area insets