JSFiddle - React, Tailwind, and code Playground

by Brodingo

HTML

<div id="box" class="vingette">lol</div>
<br>
<img class="vingette" src="http://farm6.static.flickr.com/5223/5695966320_03c9505fab_m.jpg">

CSS

body {
    background: #eee;
}

#box{
    width: 100px;
    height: 100px;
    padding: 20px;
    background: #ccc;
    border-radius: 4px;
}

.vingette {
    position: relative;
    display: block;
}

.vingette:after {
    position: absolute;
    top: 0;
    left: 0;
    content: "\0020";
    box-shadow: inset 0 0 4px rgba(0,0,0,.4);
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

img { opacity: .5 }

JavaScript

// box shadow vingette test

// :( http://css-tricks.com/vignetting-woes/