CSS Shadows

dabblet.css

/* CSS Shadows */
body {
	background: grey;
	padding: 100px;
}
div {
	background: white;
	height: 300px;
	position: relative;
	width: 400px;
	/* BEGIN CRAZINESS */
	-webkit-filter: drop-shadow(0 2px 4px hsla(0,0%,0%,1));
	/* END CRAZINESS */
	/*box-shadow: 0 2px 4px hsla(0,0%,0%,1);
*/

}
div:after,
div:before {
	background-size: 50px 50px;
	content: '';
	height: 100%;
	position: absolute;
	top: 0;
	width: 50px;
}
div:after {
	background-image: -webkit-linear-gradient(-45deg, transparent 50%, white 50%);
	left: -50px;
}

div:before {
	background-image: -webkit-linear-gradient(-45deg, white 50%, transparent 50%);
	right: -50px;
}

dabblet.html

<!-- CSS Shadows -->
<div></div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}