box-shadow vs drop-shadow

dabblet.css

/**
 * box-shadow vs drop-shadow
 * Webkit-only at the moment (Chrome Canary or Webkit nightlies)
 */

div {
	position: relative;
	width: 150px;
	padding: 20px;
	border: 5px dotted;
	border-radius: 20px;
	margin: 60px;
	color: #f06;
	font: bold 150% sans-serif;
}

div.drop-shadow {
	-webkit-filter: drop-shadow(3px 3px 5px gray);
}

div.box-shadow {
	box-shadow: 3px 3px 5px gray;
}

div:after {
	content: '';
	position: absolute;
	right: -40px;
	top: 25px;
	border: 20px solid transparent;
	border-left-color: #f06;
}

dabblet.html

<div class="drop-shadow">I &#x2665; SVG filters!</div>

<div class="box-shadow">I &#x2665; CSS3 box-shadow!</div>

settings.json

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