<svg aria-hidden="true" width="0" height="0">
  <filter id="filter">
    <feTurbulence type="turbulence" baseFrequency="0.002 0.008" numOctaves="20" seed="2" stitchTiles="stitch" result="turbulence" />
    <feColorMatrix type="saturate" values="30" in="turbulence" result="colormatrix" />
    <feColorMatrix type="matrix" values="1 0 0 0 0
  0 1 0 0 0
  0 0 1 0 0
  0 0 0 150 -15" in="colormatrix" result="colormatrix1" />
    <feComposite in="SourceGraphic" in2="colormatrix1" operator="in" result="composite" />
  </filter>
</svg>

<div class="grunge">Grunge</div>
.grunge {
  white-space: nowrap;
  font-size: 15vw;
  color: white;
  font-family: Arial Black, Helvetica, sans-serif;
  font-weight: 700;
  filter: url(#filter);
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  overflow: hidden;
  background: #333;
  text-align: center;
}

svg {
  display: none;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.