CSS Vignette

Hat tip: http://stackoverflow.com/questions/9603337/html-css-how-to-make-a-vignette-effect-4-images-css3-gradient?rq=1

by Charles Goodwin

HTML

<div class="outer">
    <div class="inner"></div>
    <div class="resize"></div>
</div>

CSS

div.outer{
    position:relative;
    overflow:auto;
    float:left;
    z-index:0;
}
div.resize{
    position:relative;
    width:250px;
    height:300px;
    resize: both;
    overflow:hidden;
    z-index:10;
    border:1px solid red;
}

div.inner{
    position:absolute;
    width:100%;
    height:100%;
    top:0;left:0;
    box-shadow: inset 0 0 85px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    z-index: 9;
}