<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Corben&display=swap" rel="stylesheet">
</head>

<body>
  <h1>moon lit</h1>
  <section>
    <div class="noise"></div>
    <div class="center">
      <div class="circle">

      </div>
    </div>

  </section>
</body>
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, midnightblue, #111);
  height: 100vh;
}

h1 {
  position: absolute;
  font-size: 4em;
  padding-top: 50px;
  font-family: "Corben", cursive;
  letter-spacing: 0.6em;
  line-height: 1.4em;
  text-transform: uppercase;
  color: teal;
  font-weight: 400;
  text-align: center;
}

section {
  position: relative;
  top: -40vh;
  width: 600px;
  height: 600px;
}

.noise {
  margin-top: -15%;
  width: 100%;
  height: 120%;
  background: radial-gradient(
      circle at 50% 50%,
      rgba(0, 0, 0, 1),
      rgba(0, 0, 0, 0)
    ),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  filter: contrast(145%) brightness(650%) invert(100%);
  mix-blend-mode: screen;
}

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  .noise {
    filter: contrast(125%) brightness(650%) invert(100%);
    mix-blend-mode: color-dodge;
  }
}

.center {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
  border-radius: 50%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.