Frosted glass look

Question

Is there an alternative to backdrop-filter in CSS? To get this example working I have to enable chrome://flags/#enable-experimental-web-platform-features

body {
  background: url('http://verdewall.com/wp-content/uploads/2016/08/Background-Images-4H9.jpg') no-repeat center;
}

.glass {
  width: 100%;
  height: 500px;
  background: rgba(0,0,0,0.8);
  
  -webkit-backdrop-filter: contrast(4) blur(30px);
  backdrop-filter: contrast(4) blur(30px);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Blur</title>
</head>
<body>
  <div class="glass">
  </div>
</body>
</html>

Here is what it looks like with the experimental features enabled:

The problem is the content below it will be dynamic. So not all of it will be images and the alternatives I find only work with images. Like the translucency with the blur shown here:

maybe you can show a screenshot of the result for people that are not able to see this — Temani Afif, Feb 20 '18 at 14:18
https://stackoverflow.com/questions/38145368/css-workaround-to-backdrop-filter — Temani Afif, Feb 20 '18 at 14:19
Possible duplicate of [How to create a frosted glass effect using CSS?](https://stackoverflow.com/questions/17089927/how-to-create-a-frosted-glass-effect-using-css) — Jonny, Feb 20 '18 at 14:21
@TemaniAfif I've tried that approach, although doesn't target what is underneath the div, like a mask of sorts to target that one area. — Jamie Bonnett, Feb 20 '18 at 14:30

Temani Afif · Accepted Answer · 2018-02-20T15:03:42.687

A workaround is to use clip-path, filter and the same content twice then you will have the same result as backdrop-filter

.container {
  width: 200px;
  height: 200px;
  position: relative;
  padding:1px;
}
.container .glass, .container .filter {
  background: url('https://lorempixel.com/400/200/') center/cover;
  text-align:center;
  color:#fff;
  height:100%;
}

.filter {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  filter: contrast(4) blur(3px);
  z-index: 2;
  clip-path: polygon(5% 15%, 82% 30%, 83% 71%, 17% 73%);
}

<div class="container">
  <div class="glass">
    <h1>A title</h1>
    <p>Some content Some content</p>
  </div>
  <div class="filter">
    <h1>A title</h1>
    <p>Some content Some content</p>
  </div>
</div>

And you can create a jQuery script that will duplicate the content for you when it will come to a lot of content. You may also consider a more complex script to adjust all the needed value and parameter.

$('.backdrop').each(function() {
  var e = $(this).html();
  $(this).append('<div class="filter">'+e+'</div>');
})

.container {
  width: 200px;
  height: 200px;
  position: relative;
  padding:1px;
  display:inline-block;
}
.container .glass, .container .filter {
  background: url('https://lorempixel.com/400/200/') center/cover;
  text-align:center;
  color:#fff;
  height:100%;
}

.filter {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  filter: contrast(4) blur(3px);
  z-index: 2;
  clip-path: polygon(5% 15%, 82% 30%, 83% 71%, 17% 73%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container backdrop">
  <div class="glass">
    <h1>A title</h1>
    <p>Some content Some content</p>
  </div>
</div>
<div class="container">
  <div class="glass">
    <h1>A title</h1>
    <p>Some content Some content</p>
  </div>
</div>

This won't work to the dynamic content nature of the underlay. I will update my post to show you what I mean. — Jamie Bonnett, Feb 20 '18 at 14:38
@JamieBonnett it will :) as you can simply apply the pseudo element without clip path to the content ;) — Temani Afif, Feb 20 '18 at 14:39
@JamieBonnett ok i updated ;) and am working on another one too — Temani Afif, Feb 20 '18 at 14:45
Thank you :) it works! Although I don't think I'll use it as it will use more resources and possibly slow the app down. I do appreciate your help though :D — Jamie Bonnett, Feb 20 '18 at 15:03
@JamieBonnett maybe you can find some optimization depending on your situtation ;) maybe you are not obliged to duplicate all the content but only the needed parts, etc — Temani Afif, Feb 20 '18 at 15:05

DreamWave · Answer 2 · 2018-02-20T14:28:22.467

1

There's simply: filter

filter: blur(10px);

You have to change your structure a little bit, though. Here's an example:

*{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
main{
  height: 100vh;
  background: url('https://images.unsplash.com/photo-1477346611705-65d1883cee1e?dpr=0.800000011920929&auto=format&fit=crop&w=1199&h=800&q=80&cs=tinysrgb&crop=') fixed no-repeat;
  background-size: cover;
}
#container{
  width: 350px;
  height: 500px;
  background: inherit;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  margin-left: -175px;
  margin-top: -250px;
  border-radius: 8px;
}
#container:before{
  width: 400px;
  height: 550px;
  content: "";
  position: absolute;
  top: -25px;
  left: -25px;
  bottom: 0;
  right: 0;
  background: inherit;
  box-shadow: inset 0 0 0 200px rgba(255,255,255,0.2);
  filter: blur(10px);
}
form img{
  width: 120px;
  height: 120px;
  border-radius: 100%;
}
form{
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
input{
  background: 0;
  width: 200px;
  outline: 0;
  border: 0;
  border-bottom: 2px solid rgba(255,255,255, 0.3);
  margin: 20px 0;
  padding-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
  color: rgba(255,255,255, 0.8);
}
input[type="submit"]{
  border: 0;
  border-radius: 8px;
  padding-bottom: 0;
  height: 60px;
  background: #df2359;
  color: white;
  cursor: pointer;
  transition: all 600ms ease-in-out;
}
input[type="submit"]:hover{
  background: #C0392B;
}
span a{
  color: rgba(255,255,255, 0.8);
}

<main>
<div id="container">
  <form action="">
    <input type="text" value=""><br>
    <input type="password"><br>
    <input type="submit" value="SIGN IN"><br>
    <span><a href="#">Forgot Password?</a></span>
  </form>
</div>
</main>

edited Feb 20 '18 at 14:28

answered Feb 20 '18 at 14:19

DreamWave

1,934
3
28
59

1

Because your answer comes off as "use filter instead of backdrop-filter", which, out of context, seems silly since the whole *point* of backdrop-filter is to apply a filter only to a specific part of the element, and not the whole thing as filter does. If your example works, then your answer suggests something completely different from what is shown in the example. The answer needs to speak for itself and not require the reader to click on a link for it to make sense. – BoltClock Feb 20 '18 at 14:24
2

@BoltClock I've copied the codepen inside here. However, according to your logic, an answer of "no" should be the answer and should be accepted, since there is no alternative to backdrop-filter. We're not here to solve people's issues, we're here to point them in the right direction. On its own, OP should use "filter". How to use it is another topic and it's not a good practice to write the code for him. – DreamWave Feb 20 '18 at 14:32
1

Pointing someone in the right direction is "use filter on a different element to *simulate* a backdrop filter." Plainly stating "Use filter instead of backdrop-filter" is *misdirection* at best and makes you(r answer) look silly at worst. You don't need to write code on anyone's behalf to point them in the right direction - all you need is a little bit more exposition so that your answer makes sense. – BoltClock Feb 20 '18 at 14:35
@Jonny: Because I was busy replying in the comments. I've taken the downvote away now that he's edited it into shape. You might want to pay attention to the timestamps of the comments and the edit - they are there for a reason. – BoltClock Feb 20 '18 at 14:39
@Jonny: I'm giving DreamWave a chance to improve his answer and he's taken it. I don't know why you're getting so worked up over a downvote on an answer that's not even yours when DreamWave himself is taking it so constructively. – BoltClock Feb 20 '18 at 14:42
I agree, no need to argue. – DreamWave Feb 20 '18 at 14:42

score 0 · Answer 3 · answered Feb 20 '18 at 14:24

Try this:

.glass:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  background: rgba(0,0,0,0.8);

  display: block;
  width:100%;
  height: 100%;

  -webkit-filter: blur(30px);
  -moz-filter: blur(30px);
  -o-filter: blur(30px);
  -ms-filter: blur(30px);
  filter: blur(30px);
}

Frosted glass look

3 Answers3

Linked

Related