CSS Noise Gradient (radial)

Spray paint, splatter effect using CSS (and SVG)

by jimmmy

HTML

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

CSS

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

h1 {
  position: absolute;
  font-size: 4.5em;
  padding-top: 100px;
  font-family: 'Corben', cursive;
  letter-spacing: 0.6em;
  line-height: 1.4em;
  text-transform: uppercase;
  color: teal;
  font-weight: 400;
}

section {
  position: relative;
  margin-top: -25%;
  width: 800px;
  height: 800px;
}

.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 700 700' 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;
}

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

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