Frosted Glass effect: filter: blur() - html

Question

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.

Answer 1

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>

Answer 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>