background: url(data:image/svg)

by SamHasler

HTML

<div class="box box1">One</div> 
<div class="box box2">Two</div>

CSS

.box { display: inline-block;width: 300px; height: 300px; border: 1px solid red; margin: 5px;}
.box1 { 
    background: 
        url('data:image/svg+xml;utf8,<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="f1"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><polygon points="200,0 200,200 0,200" filter="url(%23f1)"/></svg>') 0 0 / cover no-repeat;
}
.box2 {
    background: url('data:image/svg+xml;utf-8,%3Csvg%20class%3D%22shadow%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22f1%22%3E%3CfeGaussianBlur%20in%3D%22SourceGraphic%22%20stdDeviation%3D%225%22%20%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%22200%2C0%20200%2C200%200%2C200%22%20filter%3D%22url%28%2523f1%29%22%2F%3E%3C%2Fsvg%3E') 0 0 / cover no-repeat;
    }