.wrap h3 { font-size:18px; color:#ffffff; } .wrap p { font-size:14px; color:#ffffff; font-variant-ligatures:common-ligatures discretionary-ligatures historical-ligatures; } body { min-height:100vh; box-sizing:border-box; margin:0; padding-top:calc(50vh - 6em); font:150%/1.6 Baskerville,Palatino,serif; } body,.wrap::before { background:url("http://www.jq22.com/demo/circleMagic201710082042/dest/img/bg.jpg") 0 / cover fixed; } .wrap { position:relative; margin:0 auto; padding:1em; max-width:23em; background:hsla(0,0%,100%,.25) border-box; overflow:hidden; border-radius:.3em; box-shadow:0 0 0 1px hsla(0,0%,100%,.3) inset,0 .5em 1em rgba(0,0,0,0.6); text-shadow:0 1px 1px hsla(0,0%,100%,.3); } .wrap::before { content:''; position:absolute; top:0; right:0; bottom:0; left:0; margin:-30px; z-index:-1; -webkit-filter:blur(20px); filter:blur(20px); }