<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">

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


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.