<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">

<h2>Blurred I Am</h2>

body {
  display: grid;
  place-items: center;
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(
    to bottom,
    hsl(240,10%,15%) 0%,
    hsl(240,10%,15%) 50%,
    hsl(240,10%,10%) 50%,
    hsl(240,10%,10%) 80% 100%
  );
  font-family: 'Indie Flower', cursive;
  color: #ffffff;
}

h2 {
  margin: 0;
  font-size: 15vmin;
  
  /* Blur the text */
  filter: blur(5px);
  
  /* Set a transition for the filter */
  transition: filter 0.5s ease-out;
}

h2:hover {
  /* Set the blur filter to 0px */
  filter: blur(0px);
}