blur shadow background-clip

HTML

<div>
  <h1 class="shadow">Hello world</h1>
  <h1>Hello world</h1>
</div>

CSS

body{
  font-family: 'SF Pro Text', 'Arial', sans-serif;
  font-size: 50px;
  padding: 30px 50px;
}

body, .shadow{
  background: url(https://dsc.cloud/78daed/h006_b_E01_k.jpg);
  background-repeat: no-repeat;  
}

div{
  position: relative;
}

h1{
  padding: 0;
  margin: 0;
  color: white;
  position: absolute;
  top: 0;
  left: 0;
}


.shadow{
   background-attachment: fixed;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  
  filter: blur(5px);
  -webkit-text-stroke: 10px #fff0;
  
}