<header>
  <h1>This is the Header</h1>
</header>
<main>
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum possimus quam optio qui laboriosam officiis doloremque ipsum, eaque, repellat eligendi, id ut. Optio voluptatibus quaerat exercitationem, ipsa doloribus voluptas sunt?
  </p>
  <p>
    Similique voluptates nesciunt quae architecto. Sed suscipit eius ipsum nostrum sint non unde dolorum ab eaque sunt numquam iste, nesciunt quos dolores laudantium corporis, placeat officiis aspernatur alias. Praesentium, quibusdam?
  </p>
  <p>
    Aliquid fugit dolor reiciendis rem aut debitis incidunt? Blanditiis, eum inventore facilis quasi perspiciatis eligendi beatae qui sapiente quo voluptas, non magni excepturi nesciunt officiis numquam accusamus maiores amet soluta!
  </p>
  <p>
    Ad nulla vero hic officia, expedita repudiandae totam rerum eligendi dolore quas ipsum! Repudiandae doloremque, iure quos impedit facere error reprehenderit numquam deleniti nam! Dolore aut numquam labore quia dolorum.
  </p>
  <p>
    Quasi suscipit vero tenetur hic beatae fuga architecto blanditiis atque! Accusantium, eveniet porro! Esse amet aspernatur maiores, in quaerat vitae? Et officiis, voluptates ut magni qui dolorum in ipsum dolore.
  </p>
  <p>
    Aperiam soluta quos illo veniam praesentium rem rerum cupiditate similique assumenda sit vitae animi dolorum iure a, consectetur cum optio, tenetur id reiciendis quod hic, accusamus ullam! Eligendi, unde ipsa.
  </p>
</main>
<footer>
  <h2>This is the Footer</h2>
</footer>
:root {
  --maskWidth: 62.5em; /* 1000px */
  --maskHeight: 3.125em; /* 50px */
}

header {
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 50'%3E%3Cswitch%3E%3Cg%3E%3Cpath d='M0 0v14.3c14.4-.4 28.2 3.9 38.8 9.2C56.9 34 86.3 46.8 124.4 48.3h.1c1.8.1 3.7.1 5.6.1H137.9c.9 0 1.9-.1 2.8-.1h.7c.6 0 1.3-.1 1.9-.1h.6c21.6-1.3 45.5-6.4 71.3-17.2 48.3-20.3 85.5-26.1 114.2-26.1 27 0 46.5 5 60.8 7.8 61.2 12 126.2 35.1 186.5 35.3 29.4.1 57.7-5.3 83.8-20 14.4-8.2 32-11.2 51.2-11.1 61.7.3 141.1 32.6 192.8 32.3 1.1 0 2.2 0 3.3-.1 18.6-.6 41-9.8 60-24.4 10.2-7.2 21.4-10.1 32.3-10.4V0H0z'/%3E%3C/g%3E%3C/switch%3E%3C/svg%3E"),
    linear-gradient(
      black,
      black calc(100% - var(--maskHeight) + 0.5px),
      transparent calc(100% - var(--maskHeight) + 0.5px),
      transparent
    );
  mask-size: var(--maskWidth) var(--maskHeight), 100%;
  mask-position: bottom center;
  mask-repeat: repeat-x;
}

footer {
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' id='Layer_1' x='0' y='0' style='enable-background:new 0 0 1000 50' version='1.1' viewBox='0 0 1000 50'%3E%3Cswitch%3E%3Cg%3E%3Cpath d='M1000 50V35.7c-14.4.4-28.2-3.9-38.8-9.2C943.1 16 913.7 3.2 875.6 1.7h-.1c-1.8-.1-3.7-.1-5.6-.1H862.1c-.9 0-1.9.1-2.8.1h-.7c-.6 0-1.3.1-1.9.1h-.6c-21.6 1.3-45.5 6.4-71.3 17.2-48.3 20.3-85.5 26.1-114.2 26.1-27 0-46.5-5-60.8-7.8C548.6 25.3 483.6 2.2 423.3 2c-29.4-.1-57.7 5.3-83.8 20-14.4 8.2-32 11.2-51.2 11.1C226.6 32.9 147.2.5 95.5.8c-1.1 0-2.2 0-3.3.1-18.6.6-41 9.8-60 24.4C22.1 32.5 10.9 35.4 0 35.7V50h1000z'/%3E%3C/g%3E%3C/switch%3E%3C/svg%3E"),
    linear-gradient(
      transparent 0%,
      transparent var(--maskHeight),
      black var(--maskHeight),
      black 100%
    );
  mask-size: var(--maskWidth) var(--maskHeight), 100%;
  mask-position: top center;
  mask-repeat: repeat-x;
}

























html {
  color: #777;
  font-family: arial, sans-serif;
}

body {
  margin: 0;
}

header,
footer {
  display: grid;
  height: 20em;
  overflow: hidden;
  place-items: center;
  position: relative;
}

header::before,
footer::before {
  background-color: #26004d;
  background-image:
    radial-gradient(at 87% 88%, hsla(62, 94%, 50%, 1) 0, hsla(62, 94%, 50%, 0) 50%),
    radial-gradient(at 28% 4%, hsla(118, 95%, 61%, 1) 0, hsla(118, 95%, 61%, 0) 50%),
    radial-gradient(at 50% 6%, hsla(59, 89%, 56%, 1) 0, hsla(59, 89%, 56%, 0) 50%),
    radial-gradient(at 23% 61%, hsla(25, 93%, 67%, 1) 0, hsla(25, 93%, 67%, 0) 50%),
    radial-gradient(at 34% 23%, hsla(157, 89%, 54%, 1) 0, hsla(157, 89%, 54%, 0) 50%),
    radial-gradient(at 95% 78%, hsla(46, 86%, 57%, 1) 0, hsla(46, 86%, 57%, 0) 50%),
    radial-gradient(at 71% 7%, hsla(187, 88%, 56%, 1) 0, hsla(187, 88%, 56%, 0) 50%);
  content: '';
  height: 35em;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

h1,
h2 {
  color: white;
  font-size: 350%;
  margin: 0;
  position: relative;
}

main {
  width: 50%;
  margin: 5em auto;
}

p {
  font-size: 1.125em;
  line-height: 1.5;
}

p:first-child {
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.