<div class="container">
  <p class="text-blur">Pure CSS Blur</p>
</div>

@import url(https://fonts.googleapis.com/css?family=Special+Elite);

$font-size: 4rem;

body {
  background-color: #222229;
}

.container {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

p {
  font-family:'Special Elite', cursive;
  font-size: $font-size;
}

.text-blur {
  color: transparent;
  text-shadow: 0 0 ($font-size / 7) #eee;
  transition: all 0.35s ease;
  
  &:hover {
    color: #eee;
    text-shadow: none;
  }
}