.container.earth
.container.earth
.box.translucent
.header Herp derp SVG blur!
.breader Skate ipsum dolor sit kickflip 720 nollie handstand melon judo 180 darkslide impossible kickflip impossible kickflip 360. Nollie handstand melon judo 180 darkslide, impossible kickflip 360 nollie handstand melon judo 610. Darkslide impossible kickflip 360 nollie handstand melon judo 180 darkslide impossible kickflip 900. Nollie handstand melon judo 180 darkslide 360 nollie handstand melon judo 1080 darkslide impossible.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><defs>
<filter id="blur"><feGaussianBlur in="SourceGraphic" stdDeviation="8 8" /></filter>
</defs></svg>body {
body {font-size: 16px;
font-family: "Droid Sans";
}
.container {position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.earth {background: url("https://i.imgur.com/Zt8zbmV.jpg");
background-size: cover;
background-position: 50% 50%;
background-attachment: fixed;
}
.box {display: inline-block;
position: absolute; padding: 10%;
box-sizing: border-box;
margin: 8%;
}
.translucent:before {
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
content: " ";
background-clip: content-box;
-webkit-filter: url("#blur");
filter: url("#blur");
background: url("https://i.imgur.com/Zt8zbmV.jpg");
background-size: cover;
background-position: 50% 50%;
background-attachment: fixed;
z-index: -100;
}
.translucent {z-index: 9001;
color: #FFF;
background: rgba(0,0,0,0.7);
padding: 0.5em 1em 1.5em;
//* box-shadow:inset 0 0 2.5em 2em rgba(48, 96, 146, 0.52)/*,
0 0.25em 0.82em -0.25em rgba(0,128,250,0.3); //*/}
.header {font-weight: bold;
font-size: 2em;
line-height: 2em;
text-shadow:0 1px 0 rgba(168,200,255,0.6),
0 -1px 0 rgba(0,0,128,0.4);
}
.breader {margin: 0 1em;
text-align: justify;
letter-spacing: 0.25px;
word-spacing: -0.08em;
font-size: 1em;
line-height: 1.62em;
}