Frosted Glass effect: filter: blur()

-1

EDIT: added codepen links

I'm currently attempting to get a frosted glass effect using CSS however everything I've tried has just resulted in a slight tint.

This is being tested in Chrome.

body {

  font: 15px/1.5 Arial, Helvetica, sans-serif;

  padding: 0;

  margin: 0;

  background: url("https://i.imgur.com/ht1etAo.jpg");

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: cover;

}



.frost {

  color: #ffffff;

  width: 400px;

  height: 200px;

  position: absolute;

  background: inherit;

  overflow: hidden;

  margin: 0 auto;

  padding: 2rem;

}



.frost:before {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  background: inherit;

  filter: blur(20px);

  box-shadow: inset 0 0 3000px rgba(255, 255, 255, 0.5);

  margin: -20px;

}

<section id="frontImage">

  <div class="container">

    <div class="frost">

      <h3>Testing Glass</h3>

    </div>

  </div>

</section>

It doesn't actually seem like the filter property is working, as changing it doesn't actually effect the div.

Here's my code: I'm attempting to blur the frost div

Aiming for this kind of effect: https://codepen.io/AmJustSam/full/ModORY/

What I've got: https://codepen.io/anon/pen/PxWEde

I've attempted using webkit-blur too but that hasn't worked either.

Any advice is greatly appreciated. If further info is needed, please ask.

edited Nov 13 '18 at 15:23

ksav

5,03821331

asked Nov 13 '18 at 14:48

Mr. Slug

1

Can you provide a jsfiddle/codepen or similar instead of a screenshot? Also I don't really understand what your desired outcome is, can you elaborate on that?

– Jonas Praem
Nov 13 '18 at 14:52

Dont you want to apply the filter to the body (which has the background-image)?

– ksav
Nov 13 '18 at 15:00

Currently you're applying the filter to the before-element, which just blurs the box-shadow. What exactly do you want to blur, the background image or the "Testing Glass"-element?

– Michael
Nov 13 '18 at 15:04

I'd like to blur the background behind the box I've added codepens to show the desired result

– Mr. Slug
Nov 13 '18 at 15:09

related : stackoverflow.com/questions/48887219/frosted-glass-look/…

– Temani Afif
Nov 13 '18 at 15:45

add a comment |

-1

EDIT: added codepen links

I'm currently attempting to get a frosted glass effect using CSS however everything I've tried has just resulted in a slight tint.

This is being tested in Chrome.

body {

  font: 15px/1.5 Arial, Helvetica, sans-serif;

  padding: 0;

  margin: 0;

  background: url("https://i.imgur.com/ht1etAo.jpg");

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: cover;

}



.frost {

  color: #ffffff;

  width: 400px;

  height: 200px;

  position: absolute;

  background: inherit;

  overflow: hidden;

  margin: 0 auto;

  padding: 2rem;

}



.frost:before {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  background: inherit;

  filter: blur(20px);

  box-shadow: inset 0 0 3000px rgba(255, 255, 255, 0.5);

  margin: -20px;

}

<section id="frontImage">

  <div class="container">

    <div class="frost">

      <h3>Testing Glass</h3>

    </div>

  </div>

</section>

It doesn't actually seem like the filter property is working, as changing it doesn't actually effect the div.

Here's my code: I'm attempting to blur the frost div

Aiming for this kind of effect: https://codepen.io/AmJustSam/full/ModORY/

What I've got: https://codepen.io/anon/pen/PxWEde

I've attempted using webkit-blur too but that hasn't worked either.

Any advice is greatly appreciated. If further info is needed, please ask.

edited Nov 13 '18 at 15:23

ksav

5,03821331

asked Nov 13 '18 at 14:48

Mr. Slug

1

Can you provide a jsfiddle/codepen or similar instead of a screenshot? Also I don't really understand what your desired outcome is, can you elaborate on that?

– Jonas Praem
Nov 13 '18 at 14:52

Dont you want to apply the filter to the body (which has the background-image)?

– ksav
Nov 13 '18 at 15:00

Currently you're applying the filter to the before-element, which just blurs the box-shadow. What exactly do you want to blur, the background image or the "Testing Glass"-element?

– Michael
Nov 13 '18 at 15:04

I'd like to blur the background behind the box I've added codepens to show the desired result

– Mr. Slug
Nov 13 '18 at 15:09

related : stackoverflow.com/questions/48887219/frosted-glass-look/…

– Temani Afif
Nov 13 '18 at 15:45

add a comment |

-1

EDIT: added codepen links

I'm currently attempting to get a frosted glass effect using CSS however everything I've tried has just resulted in a slight tint.

This is being tested in Chrome.

body {

  font: 15px/1.5 Arial, Helvetica, sans-serif;

  padding: 0;

  margin: 0;

  background: url("https://i.imgur.com/ht1etAo.jpg");

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: cover;

}



.frost {

  color: #ffffff;

  width: 400px;

  height: 200px;

  position: absolute;

  background: inherit;

  overflow: hidden;

  margin: 0 auto;

  padding: 2rem;

}



.frost:before {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  background: inherit;

  filter: blur(20px);

  box-shadow: inset 0 0 3000px rgba(255, 255, 255, 0.5);

  margin: -20px;

}

<section id="frontImage">

  <div class="container">

    <div class="frost">

      <h3>Testing Glass</h3>

    </div>

  </div>

</section>

It doesn't actually seem like the filter property is working, as changing it doesn't actually effect the div.

Here's my code: I'm attempting to blur the frost div

Aiming for this kind of effect: https://codepen.io/AmJustSam/full/ModORY/

What I've got: https://codepen.io/anon/pen/PxWEde

I've attempted using webkit-blur too but that hasn't worked either.

Any advice is greatly appreciated. If further info is needed, please ask.

edited Nov 13 '18 at 15:23

ksav

5,03821331

asked Nov 13 '18 at 14:48

Mr. Slug

EDIT: added codepen links

I'm currently attempting to get a frosted glass effect using CSS however everything I've tried has just resulted in a slight tint.

This is being tested in Chrome.

body {

  font: 15px/1.5 Arial, Helvetica, sans-serif;

  padding: 0;

  margin: 0;

  background: url("https://i.imgur.com/ht1etAo.jpg");

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: cover;

}



.frost {

  color: #ffffff;

  width: 400px;

  height: 200px;

  position: absolute;

  background: inherit;

  overflow: hidden;

  margin: 0 auto;

  padding: 2rem;

}



.frost:before {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  background: inherit;

  filter: blur(20px);

  box-shadow: inset 0 0 3000px rgba(255, 255, 255, 0.5);

  margin: -20px;

}

<section id="frontImage">

  <div class="container">

    <div class="frost">

      <h3>Testing Glass</h3>

    </div>

  </div>

</section>

It doesn't actually seem like the filter property is working, as changing it doesn't actually effect the div.

Here's my code: I'm attempting to blur the frost div

Aiming for this kind of effect: https://codepen.io/AmJustSam/full/ModORY/

What I've got: https://codepen.io/anon/pen/PxWEde

I've attempted using webkit-blur too but that hasn't worked either.

Any advice is greatly appreciated. If further info is needed, please ask.

body {

  font: 15px/1.5 Arial, Helvetica, sans-serif;

  padding: 0;

  margin: 0;

  background: url("https://i.imgur.com/ht1etAo.jpg");

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: cover;

}



.frost {

  color: #ffffff;

  width: 400px;

  height: 200px;

  position: absolute;

  background: inherit;

  overflow: hidden;

  margin: 0 auto;

  padding: 2rem;

}



.frost:before {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  background: inherit;

  filter: blur(20px);

  box-shadow: inset 0 0 3000px rgba(255, 255, 255, 0.5);

  margin: -20px;

}

<section id="frontImage">

  <div class="container">

    <div class="frost">

      <h3>Testing Glass</h3>

    </div>

  </div>

</section>

body {

  font: 15px/1.5 Arial, Helvetica, sans-serif;

  padding: 0;

  margin: 0;

  background: url("https://i.imgur.com/ht1etAo.jpg");

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: cover;

}



.frost {

  color: #ffffff;

  width: 400px;

  height: 200px;

  position: absolute;

  background: inherit;

  overflow: hidden;

  margin: 0 auto;

  padding: 2rem;

}



.frost:before {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  background: inherit;

  filter: blur(20px);

  box-shadow: inset 0 0 3000px rgba(255, 255, 255, 0.5);

  margin: -20px;

}

<section id="frontImage">

  <div class="container">

    <div class="frost">

      <h3>Testing Glass</h3>

    </div>

  </div>

</section>

html css filter blur

edited Nov 13 '18 at 15:23

ksav

5,03821331

asked Nov 13 '18 at 14:48

Mr. Slug

edited Nov 13 '18 at 15:23

ksav

5,03821331

asked Nov 13 '18 at 14:48

Mr. Slug

edited Nov 13 '18 at 15:23

ksav

5,03821331

edited Nov 13 '18 at 15:23

ksav

5,03821331

edited Nov 13 '18 at 15:23

ksav

5,03821331

asked Nov 13 '18 at 14:48

Mr. Slug

asked Nov 13 '18 at 14:48

Mr. Slug

asked Nov 13 '18 at 14:48

Mr. Slug

1

Can you provide a jsfiddle/codepen or similar instead of a screenshot? Also I don't really understand what your desired outcome is, can you elaborate on that?

– Jonas Praem
Nov 13 '18 at 14:52

Dont you want to apply the filter to the body (which has the background-image)?

– ksav
Nov 13 '18 at 15:00

Currently you're applying the filter to the before-element, which just blurs the box-shadow. What exactly do you want to blur, the background image or the "Testing Glass"-element?

– Michael
Nov 13 '18 at 15:04

I'd like to blur the background behind the box I've added codepens to show the desired result

– Mr. Slug
Nov 13 '18 at 15:09

related : stackoverflow.com/questions/48887219/frosted-glass-look/…

– Temani Afif
Nov 13 '18 at 15:45

add a comment |

1

Can you provide a jsfiddle/codepen or similar instead of a screenshot? Also I don't really understand what your desired outcome is, can you elaborate on that?

– Jonas Praem
Nov 13 '18 at 14:52

Dont you want to apply the filter to the body (which has the background-image)?

– ksav
Nov 13 '18 at 15:00

Currently you're applying the filter to the before-element, which just blurs the box-shadow. What exactly do you want to blur, the background image or the "Testing Glass"-element?

– Michael
Nov 13 '18 at 15:04

I'd like to blur the background behind the box I've added codepens to show the desired result

– Mr. Slug
Nov 13 '18 at 15:09

related : stackoverflow.com/questions/48887219/frosted-glass-look/…

– Temani Afif
Nov 13 '18 at 15:45

Can you provide a jsfiddle/codepen or similar instead of a screenshot? Also I don't really understand what your desired outcome is, can you elaborate on that?

– Jonas Praem
Nov 13 '18 at 14:52

Dont you want to apply the filter to the body (which has the background-image)?

– ksav
Nov 13 '18 at 15:00

Currently you're applying the filter to the before-element, which just blurs the box-shadow. What exactly do you want to blur, the background image or the "Testing Glass"-element?

– Michael
Nov 13 '18 at 15:04

I'd like to blur the background behind the box I've added codepens to show the desired result

– Mr. Slug
Nov 13 '18 at 15:09

related : stackoverflow.com/questions/48887219/frosted-glass-look/…

– Temani Afif
Nov 13 '18 at 15:45

add a comment |

2 Answers
2

active

oldest

votes

body {

  padding: 0;

  margin: 0;

  background: url("https://i.imgur.com/ht1etAo.jpg");

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: cover;

  display: flex;

  justify-content: center;

}



.frost {

  width: 400px;

  height: 200px;

  position: absolute;

  background: inherit;

}



.frost:before {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  filter: blur(2px);

  background: inherit;

}



.content {

  position: absolute;

  width: 340px;

  height: 140px;

  top: 30px;

  left: 30px;

}

<div class="frost">

  <div class="content">

    <h3>Testing Glass</h3>

    <p>lipsum</p>

  </div>

</div>

edited Nov 13 '18 at 15:19

answered Nov 13 '18 at 15:06

ksav

5,03821331

I'd like the text to remain unfiltered, I explained what I wanted poorly. I've linked a codepen to a coder (AmJustSam) who has an example of the kind of effect I'm looking to get

– Mr. Slug
Nov 13 '18 at 15:12

Can't you just copy the exact effect from the codepen? I've edited the above to better reflect the setup you need to match the linked effect.

– ksav
Nov 13 '18 at 15:20

I've tried, it doesn't work for me

– Mr. Slug
Nov 13 '18 at 15:24

Does the example above work for you?

– ksav
Nov 13 '18 at 15:43

I'm afraid not, when I tried it, it doesn't actually display anything

– Mr. Slug
Nov 13 '18 at 15:45

|
show 1 more comment

-2

I think the best way to get a realistic glass effect by using the blurred version of the original image.

Ps: Take it easy guys had an issue with HTML widget.

Here is the code hope that's help

html,

body {

  padding: 0;

  margin: 0;

}

h2 {

text-align:center;

color:white;

}

.glass-effect--bg-inner {

position:relative;

z-index:1;

padding-top:20px;

}

.container {

  width: 100%;

  height: 100%;

  min-height: 500px;

}



.large-hero--bg {

  background: url(https://cdn-std.dprcdn.net/files/acc_609131/p6BW2C) no-repeat fixed;

  background-size: cover;

  background-position: 50% 0;

}





.glass-effect {

  position: relative;

  height: 250px;



}



.glass-effect--bg:after {

   

      position: absolute;

      top: 0;

      left: 0;

      z-index: 0;

      width: 100%;

      height: 100%;

      background: url("https://cdn-std.dprcdn.net/files/acc_609131/EElxHZ") repeat fixed;

      background-size: cover;

      background-position: 50% 0;

      content: "";

      filter: url("https://cdn-std.dprcdn.net/files/acc_609131/EElxHZ") repeat fixed;

      -webkit-filter: blur(5px);

      filter: blur(5px);

  

  }

<div class="container large-hero--bg ">

  <div class="glass-effect glass-effect--bg">

<div class="glass-effect--bg-inner">



  <h2>Lorem ispsum dolor</h2>

  </div>

  </div>

</div>

edited Nov 13 '18 at 15:58

answered Nov 13 '18 at 15:20

Ihsan S

324

Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. Link-only answers can become invalid if the linked page changes

– Paulie_D
Nov 13 '18 at 15:31

Thank you! This is more along the lines of what I want. The only problem I'm having now is that it does not show the text and when the window is resized, it does not align with the window background. EDIT: Fixed text issue with z-index

– Mr. Slug
Nov 13 '18 at 15:46

You should be able to add whatever element you want into the glass-effect container. Let me know if that works.

– Ihsan S
Nov 13 '18 at 15:51

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53283593%2ffrosted-glass-effect-filter-blur%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

body {

  padding: 0;

  margin: 0;

  background: url("https://i.imgur.com/ht1etAo.jpg");

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: cover;

  display: flex;

  justify-content: center;

}



.frost {

  width: 400px;

  height: 200px;

  position: absolute;

  background: inherit;

}



.frost:before {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  filter: blur(2px);

  background: inherit;

}



.content {

  position: absolute;

  width: 340px;

  height: 140px;

  top: 30px;

  left: 30px;

}

<div class="frost">

  <div class="content">

    <h3>Testing Glass</h3>

    <p>lipsum</p>

  </div>

</div>

edited Nov 13 '18 at 15:19

answered Nov 13 '18 at 15:06

ksav

5,03821331

I'd like the text to remain unfiltered, I explained what I wanted poorly. I've linked a codepen to a coder (AmJustSam) who has an example of the kind of effect I'm looking to get

– Mr. Slug
Nov 13 '18 at 15:12

Can't you just copy the exact effect from the codepen? I've edited the above to better reflect the setup you need to match the linked effect.

– ksav
Nov 13 '18 at 15:20

I've tried, it doesn't work for me

– Mr. Slug
Nov 13 '18 at 15:24

Does the example above work for you?

– ksav
Nov 13 '18 at 15:43

I'm afraid not, when I tried it, it doesn't actually display anything

– Mr. Slug
Nov 13 '18 at 15:45

|
show 1 more comment

body {

  padding: 0;

  margin: 0;

  background: url("https://i.imgur.com/ht1etAo.jpg");

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: cover;

  display: flex;

  justify-content: center;

}



.frost {

  width: 400px;

  height: 200px;

  position: absolute;

  background: inherit;

}



.frost:before {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  filter: blur(2px);

  background: inherit;

}



.content {

  position: absolute;

  width: 340px;

  height: 140px;

  top: 30px;

  left: 30px;

}

<div class="frost">

  <div class="content">

    <h3>Testing Glass</h3>

    <p>lipsum</p>

  </div>

</div>

edited Nov 13 '18 at 15:19

answered Nov 13 '18 at 15:06

ksav

5,03821331

I'd like the text to remain unfiltered, I explained what I wanted poorly. I've linked a codepen to a coder (AmJustSam) who has an example of the kind of effect I'm looking to get

– Mr. Slug
Nov 13 '18 at 15:12

Can't you just copy the exact effect from the codepen? I've edited the above to better reflect the setup you need to match the linked effect.

– ksav
Nov 13 '18 at 15:20

I've tried, it doesn't work for me

– Mr. Slug
Nov 13 '18 at 15:24

Does the example above work for you?

– ksav
Nov 13 '18 at 15:43

I'm afraid not, when I tried it, it doesn't actually display anything

– Mr. Slug
Nov 13 '18 at 15:45

|
show 1 more comment

body {

  padding: 0;

  margin: 0;

  background: url("https://i.imgur.com/ht1etAo.jpg");

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: cover;

  display: flex;

  justify-content: center;

}



.frost {

  width: 400px;

  height: 200px;

  position: absolute;

  background: inherit;

}



.frost:before {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  filter: blur(2px);

  background: inherit;

}



.content {

  position: absolute;

  width: 340px;

  height: 140px;

  top: 30px;

  left: 30px;

}

<div class="frost">

  <div class="content">

    <h3>Testing Glass</h3>

    <p>lipsum</p>

  </div>

</div>

edited Nov 13 '18 at 15:19

answered Nov 13 '18 at 15:06

ksav

5,03821331

body {

  padding: 0;

  margin: 0;

  background: url("https://i.imgur.com/ht1etAo.jpg");

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: cover;

  display: flex;

  justify-content: center;

}



.frost {

  width: 400px;

  height: 200px;

  position: absolute;

  background: inherit;

}



.frost:before {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  filter: blur(2px);

  background: inherit;

}



.content {

  position: absolute;

  width: 340px;

  height: 140px;

  top: 30px;

  left: 30px;

}

<div class="frost">

  <div class="content">

    <h3>Testing Glass</h3>

    <p>lipsum</p>

  </div>

</div>

body {

  padding: 0;

  margin: 0;

  background: url("https://i.imgur.com/ht1etAo.jpg");

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: cover;

  display: flex;

  justify-content: center;

}



.frost {

  width: 400px;

  height: 200px;

  position: absolute;

  background: inherit;

}



.frost:before {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  filter: blur(2px);

  background: inherit;

}



.content {

  position: absolute;

  width: 340px;

  height: 140px;

  top: 30px;

  left: 30px;

}

<div class="frost">

  <div class="content">

    <h3>Testing Glass</h3>

    <p>lipsum</p>

  </div>

</div>

body {

  padding: 0;

  margin: 0;

  background: url("https://i.imgur.com/ht1etAo.jpg");

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: cover;

  display: flex;

  justify-content: center;

}



.frost {

  width: 400px;

  height: 200px;

  position: absolute;

  background: inherit;

}



.frost:before {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  filter: blur(2px);

  background: inherit;

}



.content {

  position: absolute;

  width: 340px;

  height: 140px;

  top: 30px;

  left: 30px;

}

<div class="frost">

  <div class="content">

    <h3>Testing Glass</h3>

    <p>lipsum</p>

  </div>

</div>

edited Nov 13 '18 at 15:19

answered Nov 13 '18 at 15:06

ksav

5,03821331

edited Nov 13 '18 at 15:19

answered Nov 13 '18 at 15:06

ksav

5,03821331

answered Nov 13 '18 at 15:06

ksav

5,03821331

answered Nov 13 '18 at 15:06

ksav

5,03821331

I'd like the text to remain unfiltered, I explained what I wanted poorly. I've linked a codepen to a coder (AmJustSam) who has an example of the kind of effect I'm looking to get

– Mr. Slug
Nov 13 '18 at 15:12

Can't you just copy the exact effect from the codepen? I've edited the above to better reflect the setup you need to match the linked effect.

– ksav
Nov 13 '18 at 15:20

I've tried, it doesn't work for me

– Mr. Slug
Nov 13 '18 at 15:24

Does the example above work for you?

– ksav
Nov 13 '18 at 15:43

I'm afraid not, when I tried it, it doesn't actually display anything

– Mr. Slug
Nov 13 '18 at 15:45

|
show 1 more comment

I'd like the text to remain unfiltered, I explained what I wanted poorly. I've linked a codepen to a coder (AmJustSam) who has an example of the kind of effect I'm looking to get

– Mr. Slug
Nov 13 '18 at 15:12

Can't you just copy the exact effect from the codepen? I've edited the above to better reflect the setup you need to match the linked effect.

– ksav
Nov 13 '18 at 15:20

I've tried, it doesn't work for me

– Mr. Slug
Nov 13 '18 at 15:24

Does the example above work for you?

– ksav
Nov 13 '18 at 15:43

I'm afraid not, when I tried it, it doesn't actually display anything

– Mr. Slug
Nov 13 '18 at 15:45

I'd like the text to remain unfiltered, I explained what I wanted poorly. I've linked a codepen to a coder (AmJustSam) who has an example of the kind of effect I'm looking to get

– Mr. Slug
Nov 13 '18 at 15:12

Can't you just copy the exact effect from the codepen? I've edited the above to better reflect the setup you need to match the linked effect.

– ksav
Nov 13 '18 at 15:20

I've tried, it doesn't work for me

– Mr. Slug
Nov 13 '18 at 15:24

Does the example above work for you?

– ksav
Nov 13 '18 at 15:43

I'm afraid not, when I tried it, it doesn't actually display anything

– Mr. Slug
Nov 13 '18 at 15:45

|
show 1 more comment

-2

I think the best way to get a realistic glass effect by using the blurred version of the original image.

Ps: Take it easy guys had an issue with HTML widget.

Here is the code hope that's help

html,

body {

  padding: 0;

  margin: 0;

}

h2 {

text-align:center;

color:white;

}

.glass-effect--bg-inner {

position:relative;

z-index:1;

padding-top:20px;

}

.container {

  width: 100%;

  height: 100%;

  min-height: 500px;

}



.large-hero--bg {

  background: url(https://cdn-std.dprcdn.net/files/acc_609131/p6BW2C) no-repeat fixed;

  background-size: cover;

  background-position: 50% 0;

}





.glass-effect {

  position: relative;

  height: 250px;



}



.glass-effect--bg:after {

   

      position: absolute;

      top: 0;

      left: 0;

      z-index: 0;

      width: 100%;

      height: 100%;

      background: url("https://cdn-std.dprcdn.net/files/acc_609131/EElxHZ") repeat fixed;

      background-size: cover;

      background-position: 50% 0;

      content: "";

      filter: url("https://cdn-std.dprcdn.net/files/acc_609131/EElxHZ") repeat fixed;

      -webkit-filter: blur(5px);

      filter: blur(5px);

  

  }

<div class="container large-hero--bg ">

  <div class="glass-effect glass-effect--bg">

<div class="glass-effect--bg-inner">



  <h2>Lorem ispsum dolor</h2>

  </div>

  </div>

</div>

edited Nov 13 '18 at 15:58

answered Nov 13 '18 at 15:20

Ihsan S

324

Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. Link-only answers can become invalid if the linked page changes

– Paulie_D
Nov 13 '18 at 15:31

Thank you! This is more along the lines of what I want. The only problem I'm having now is that it does not show the text and when the window is resized, it does not align with the window background. EDIT: Fixed text issue with z-index

– Mr. Slug
Nov 13 '18 at 15:46

You should be able to add whatever element you want into the glass-effect container. Let me know if that works.

– Ihsan S
Nov 13 '18 at 15:51

add a comment |

-2

I think the best way to get a realistic glass effect by using the blurred version of the original image.

Ps: Take it easy guys had an issue with HTML widget.

Here is the code hope that's help

html,

body {

  padding: 0;

  margin: 0;

}

h2 {

text-align:center;

color:white;

}

.glass-effect--bg-inner {

position:relative;

z-index:1;

padding-top:20px;

}

.container {

  width: 100%;

  height: 100%;

  min-height: 500px;

}



.large-hero--bg {

  background: url(https://cdn-std.dprcdn.net/files/acc_609131/p6BW2C) no-repeat fixed;

  background-size: cover;

  background-position: 50% 0;

}





.glass-effect {

  position: relative;

  height: 250px;



}



.glass-effect--bg:after {

   

      position: absolute;

      top: 0;

      left: 0;

      z-index: 0;

      width: 100%;

      height: 100%;

      background: url("https://cdn-std.dprcdn.net/files/acc_609131/EElxHZ") repeat fixed;

      background-size: cover;

      background-position: 50% 0;

      content: "";

      filter: url("https://cdn-std.dprcdn.net/files/acc_609131/EElxHZ") repeat fixed;

      -webkit-filter: blur(5px);

      filter: blur(5px);

  

  }

<div class="container large-hero--bg ">

  <div class="glass-effect glass-effect--bg">

<div class="glass-effect--bg-inner">



  <h2>Lorem ispsum dolor</h2>

  </div>

  </div>

</div>

edited Nov 13 '18 at 15:58

answered Nov 13 '18 at 15:20

Ihsan S

324

Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. Link-only answers can become invalid if the linked page changes

– Paulie_D
Nov 13 '18 at 15:31

Thank you! This is more along the lines of what I want. The only problem I'm having now is that it does not show the text and when the window is resized, it does not align with the window background. EDIT: Fixed text issue with z-index

– Mr. Slug
Nov 13 '18 at 15:46

You should be able to add whatever element you want into the glass-effect container. Let me know if that works.

– Ihsan S
Nov 13 '18 at 15:51

add a comment |

-2

I think the best way to get a realistic glass effect by using the blurred version of the original image.

Ps: Take it easy guys had an issue with HTML widget.

Here is the code hope that's help

html,

body {

  padding: 0;

  margin: 0;

}

h2 {

text-align:center;

color:white;

}

.glass-effect--bg-inner {

position:relative;

z-index:1;

padding-top:20px;

}

.container {

  width: 100%;

  height: 100%;

  min-height: 500px;

}



.large-hero--bg {

  background: url(https://cdn-std.dprcdn.net/files/acc_609131/p6BW2C) no-repeat fixed;

  background-size: cover;

  background-position: 50% 0;

}





.glass-effect {

  position: relative;

  height: 250px;



}



.glass-effect--bg:after {

   

      position: absolute;

      top: 0;

      left: 0;

      z-index: 0;

      width: 100%;

      height: 100%;

      background: url("https://cdn-std.dprcdn.net/files/acc_609131/EElxHZ") repeat fixed;

      background-size: cover;

      background-position: 50% 0;

      content: "";

      filter: url("https://cdn-std.dprcdn.net/files/acc_609131/EElxHZ") repeat fixed;

      -webkit-filter: blur(5px);

      filter: blur(5px);

  

  }

<div class="container large-hero--bg ">

  <div class="glass-effect glass-effect--bg">

<div class="glass-effect--bg-inner">



  <h2>Lorem ispsum dolor</h2>

  </div>

  </div>

</div>

edited Nov 13 '18 at 15:58

answered Nov 13 '18 at 15:20

Ihsan S

324

I think the best way to get a realistic glass effect by using the blurred version of the original image.

Ps: Take it easy guys had an issue with HTML widget.

Here is the code hope that's help

html,

body {

  padding: 0;

  margin: 0;

}

h2 {

text-align:center;

color:white;

}

.glass-effect--bg-inner {

position:relative;

z-index:1;

padding-top:20px;

}

.container {

  width: 100%;

  height: 100%;

  min-height: 500px;

}



.large-hero--bg {

  background: url(https://cdn-std.dprcdn.net/files/acc_609131/p6BW2C) no-repeat fixed;

  background-size: cover;

  background-position: 50% 0;

}





.glass-effect {

  position: relative;

  height: 250px;



}



.glass-effect--bg:after {

   

      position: absolute;

      top: 0;

      left: 0;

      z-index: 0;

      width: 100%;

      height: 100%;

      background: url("https://cdn-std.dprcdn.net/files/acc_609131/EElxHZ") repeat fixed;

      background-size: cover;

      background-position: 50% 0;

      content: "";

      filter: url("https://cdn-std.dprcdn.net/files/acc_609131/EElxHZ") repeat fixed;

      -webkit-filter: blur(5px);

      filter: blur(5px);

  

  }

<div class="container large-hero--bg ">

  <div class="glass-effect glass-effect--bg">

<div class="glass-effect--bg-inner">



  <h2>Lorem ispsum dolor</h2>

  </div>

  </div>

</div>

html,

body {

  padding: 0;

  margin: 0;

}

h2 {

text-align:center;

color:white;

}

.glass-effect--bg-inner {

position:relative;

z-index:1;

padding-top:20px;

}

.container {

  width: 100%;

  height: 100%;

  min-height: 500px;

}



.large-hero--bg {

  background: url(https://cdn-std.dprcdn.net/files/acc_609131/p6BW2C) no-repeat fixed;

  background-size: cover;

  background-position: 50% 0;

}





.glass-effect {

  position: relative;

  height: 250px;



}



.glass-effect--bg:after {

   

      position: absolute;

      top: 0;

      left: 0;

      z-index: 0;

      width: 100%;

      height: 100%;

      background: url("https://cdn-std.dprcdn.net/files/acc_609131/EElxHZ") repeat fixed;

      background-size: cover;

      background-position: 50% 0;

      content: "";

      filter: url("https://cdn-std.dprcdn.net/files/acc_609131/EElxHZ") repeat fixed;

      -webkit-filter: blur(5px);

      filter: blur(5px);

  

  }

<div class="container large-hero--bg ">

  <div class="glass-effect glass-effect--bg">

<div class="glass-effect--bg-inner">



  <h2>Lorem ispsum dolor</h2>

  </div>

  </div>

</div>

html,

body {

  padding: 0;

  margin: 0;

}

h2 {

text-align:center;

color:white;

}

.glass-effect--bg-inner {

position:relative;

z-index:1;

padding-top:20px;

}

.container {

  width: 100%;

  height: 100%;

  min-height: 500px;

}



.large-hero--bg {

  background: url(https://cdn-std.dprcdn.net/files/acc_609131/p6BW2C) no-repeat fixed;

  background-size: cover;

  background-position: 50% 0;

}





.glass-effect {

  position: relative;

  height: 250px;



}



.glass-effect--bg:after {

   

      position: absolute;

      top: 0;

      left: 0;

      z-index: 0;

      width: 100%;

      height: 100%;

      background: url("https://cdn-std.dprcdn.net/files/acc_609131/EElxHZ") repeat fixed;

      background-size: cover;

      background-position: 50% 0;

      content: "";

      filter: url("https://cdn-std.dprcdn.net/files/acc_609131/EElxHZ") repeat fixed;

      -webkit-filter: blur(5px);

      filter: blur(5px);

  

  }

<div class="container large-hero--bg ">

  <div class="glass-effect glass-effect--bg">

<div class="glass-effect--bg-inner">



  <h2>Lorem ispsum dolor</h2>

  </div>

  </div>

</div>

edited Nov 13 '18 at 15:58

answered Nov 13 '18 at 15:20

Ihsan S

324

edited Nov 13 '18 at 15:58

answered Nov 13 '18 at 15:20

Ihsan S

324

answered Nov 13 '18 at 15:20

Ihsan S

324

answered Nov 13 '18 at 15:20

Ihsan S

324

Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. Link-only answers can become invalid if the linked page changes

– Paulie_D
Nov 13 '18 at 15:31

Thank you! This is more along the lines of what I want. The only problem I'm having now is that it does not show the text and when the window is resized, it does not align with the window background. EDIT: Fixed text issue with z-index

– Mr. Slug
Nov 13 '18 at 15:46

You should be able to add whatever element you want into the glass-effect container. Let me know if that works.

– Ihsan S
Nov 13 '18 at 15:51

add a comment |

Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. Link-only answers can become invalid if the linked page changes

– Paulie_D
Nov 13 '18 at 15:31

Thank you! This is more along the lines of what I want. The only problem I'm having now is that it does not show the text and when the window is resized, it does not align with the window background. EDIT: Fixed text issue with z-index

– Mr. Slug
Nov 13 '18 at 15:46

You should be able to add whatever element you want into the glass-effect container. Let me know if that works.

– Ihsan S
Nov 13 '18 at 15:51

Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. Link-only answers can become invalid if the linked page changes

– Paulie_D
Nov 13 '18 at 15:31

Thank you! This is more along the lines of what I want. The only problem I'm having now is that it does not show the text and when the window is resized, it does not align with the window background. EDIT: Fixed text issue with z-index

– Mr. Slug
Nov 13 '18 at 15:46

You should be able to add whatever element you want into the glass-effect container. Let me know if that works.

– Ihsan S
Nov 13 '18 at 15:51

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky