Edit on
<div id="back"></div>
<h1>Graphic Designer</h1>
html {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font: 1em/1.4 Montserrat, sans-serif;
  letter-spacing: -.1em;
}
#back {
  position: absolute;
  z-index: -1;
  top: 0; left: 0; bottom: 0; right: 0;
  background: url(https://unsplash.imgix.net/photo-1429042007245-890c9e2603af?fit=crop&fm=jpg&h=500&q=75&w=800) center / cover no-repeat;
}

h1 {
  position: relative;
  display: flex;
  align-items: center;
  width: 300px;
  height: 300px;
  background: rgba(0,0,0,.6);
  color: #fff;
  text-align: center;
  font-weight: normal;
  font-size: 3em;
}
@supports ( (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) ) {
  h1 {
    -webkit-backdrop-filter: grayscale(1) contrast(3) blur(1px);
            backdrop-filter: grayscale(1) contrast(3) blur(1px);
  }
}
@supports ( not (backdrop-filter: blur(1px)) ) and (background: -moz-element(#back)) {
  h1::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0; left: 0; bottom: 0; right: 0;
    background: -moz-element(#back) fixed;
    filter: grayscale(1) contrast(3) blur(1px);
  }
}
Rerun