blurred image inside text // CSS HTML-CodePudding

I would like to blur the image inside the text. but as soon as i add the blur filter the text blurs too.

The solution it probably dead simple. But i'm stuck with this one for quite some time now. Any help is appreciated.

How I would like it to look:

How it looks so far:

body {
  background: #16171a;
}

.bg {
  background-image: url(https://xl.movieposterdb.com/21_08/2021/1160419/xl_1160419_230b1df1.jpg?v=2021-10-28 22:02:33);
  background-size: cover;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  overflow: auto;
  -webkit-filter: grayscale(100%) brightness(10%);
          filter: grayscale(100%) brightness(10%);
}

.title {
  background-image: url(https://xl.movieposterdb.com/21_08/2021/1160419/xl_1160419_230b1df1.jpg?v=2021-10-28 22:02:33);
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 40vw;
  font-family: 'Teko';
  text-align: center;
  z-index: 100;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  overflow: auto;
  -webkit-filter: saturate(90) blur(20px);
          filter: saturate(90) blur(20px);
}
/*# sourceMappingURL=style.css.map */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Teko:wght@700&display=swap" rel="stylesheet">
    <title>Title</title>
</head>
<body>
    <div class="title">DUNE</div>
    <div class="bg"></div>
</body>
</html>

CodePudding user response：

You could just blur the source-image itself? Download the image you have now and blur it on

CodePudding user response：

The solution i ended up with was to use a SVG element with a TEXT element inside

#bg{
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: center;
  z-index: 90;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  overflow: auto;
  filter: grayscale(100%) brightness(10%);
}

#text{ 
  font-family: 'Teko';
  font-size: 40vw;
  text-align: center;
  text-transform: uppercase;
  position: fixed; left:0; top:0;
  z-index: 100;
}

#text rect{
  color: white;
  fill: none
}


#movieImage{
  width: 100%;
  height: 100%;
  filter: saturate(100) blur(50px); 
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Teko:wght@700&display=swap" rel="stylesheet">
    <title>Title</title>
</head>
<body>
    <svg id="text" height="100%" width="100%">
        <defs>
            <mask id="mask" x="0%" y="0%" height="100%" width="100%">
                <rect x="0%" y="0%" height="100%" width="100%"/>
                <text id="title" x="50%" y="60%" fill="white" text-anchor="middle" >DUNE</text>
            </mask>
        </defs>
        <image id ="movieImage" xlink:href="https://xl.movieposterdb.com/21_08/2021/1160419/xl_1160419_230b1df1.jpg?v=2021-10-28 22:02:33" preserveAspectRatio="xMidYMid slice" mask="url(#mask)" /> 
        <rect x="0%" y="0%" height="100%" width="100%"/>
    </svg>
    <div id="bg" style="background-image: url('https://xl.movieposterdb.com/21_08/2021/1160419/xl_1160419_230b1df1.jpg?v=2021-10-28 22:02:33')"></div>
</body>
</html>

<!-- width="100%" height="100%"  -->