iframe shadow

by abhitalks

HTML

<div class="outer"> 
    <iframe src="http://jsfiddle.net" /> 
</div>

CSS

* {
    padding: 0; margin: 0; box-sizing: border-box;
}
div.outer {
    border: 1px solid silver;
    width: 320px;
    height: 320px;
    background: url('http://icons.iconarchive.com/icons/adidadidu/ipad/256/iPad-Landscape-Blank-icon.png') no-repeat top left;
    background-size: 100%;
    position: relative;
}

iframe {
    border: none;
    width: 250px;
    height: 220px;
    position: absolute; 
    top: 48px; left: 32px;
    border-radius: 10px;
    box-shadow: 0 0 30px #fff;
    opacity: 0.6; 
}