HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>:fullscreen::backdrop</title>
  <style>
    body {
      margin: 16px;
      font-family: system-ui, sans-serif;
      color: #0f172a;
    }

    .panel {
      width: 280px;
      min-height: 140px;
      padding: 1rem;
      background: #e2e8f0;
      border-radius: 8px;
    }

    .panel:fullscreen {
      background: #0f172a;
      color: #f8fafc;
      width: 100%;
      height: 100%;
      border-radius: 0;
    }

    .panel:fullscreen::backdrop {
      background: rgba(15, 23, 42, 0.75);
    }

    button {
      margin-top: 0.75rem;
    }
  </style>
</head>
<body>
  <div id="panel" class="panel">
    <p>Backdrop styles the layer behind this panel.</p>
  </div>
  <button id="btn" type="button">Toggle fullscreen</button>
  <script>
    var panel = document.getElementById("panel");
    document.getElementById("btn").onclick = function () {
      if (document.fullscreenElement) document.exitFullscreen();
      else panel.requestFullscreen();
    };
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS :fullscreen Pseudo-Class — ::backdrop