<div class='wrapper' id='hermes'>
  <div class='blurred-wrapper'>
    <div class='blurred'>swift as hermes</div>
  </div>
  <div class='still'>swift as hermes</div>
</div>

<div class='wrapper' id='sonic'>
  <div class='blurred-wrapper'>
    <img class='blurred' src='http://2.bp.blogspot.com/-IixO6EttRfY/T25DaTUWJ-I/AAAAAAAAAUo/1lJ7DuKYS6k/s1600/Sonic_runsmall.png' height='100'></img>
  </div>
  <img class='still' src='http://2.bp.blogspot.com/-IixO6EttRfY/T25DaTUWJ-I/AAAAAAAAAUo/1lJ7DuKYS6k/s1600/Sonic_runsmall.png' height='100'></img>
</div>

<div class='wrapper' id='spacex'>
  <div class='blurred-wrapper'>
    <div class='blurred'>SPAAACE</div>
  </div>
  <div class='still'>SPAAACE</div>
</div>
.wrapper {
  
  --blur: 5;
  
  font-size: 5rem;
  margin:1rem 0;
  position:relative;
  display:flex;
  flex-direction:row;
  justify-content:center;
  border-radius:1rem;
  padding:1rem 0;
  
}

.blurred-wrapper {
  
  position: absolute;
  filter: blur(1rem);
  
  transform: scale(
    var(--blur),
    0.001
  )
    
}

.blurred {
  
  transform: scale(
    calc( 1/var(--blur) ),
    1000
  )
    
}

#hermes{
  background:lightgray;
  color:#555;
}

#sonic{
  background:#000;
}

#spacex{
  background:hsl(250,50%,10%);
  font-family:sans-serif;
  color:hsl(200,100%,80%)
}
#spacex>.still{
  color:white
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.