<svg width="600" height="400" viewBox="0 0 850 650">
	<filter id="filter">
		
		<feGaussianBlur in="SourceAlpha" stdDeviation="10" result="DROP" ></feGaussianBlur>
		
		<feFlood flood-color="#bbb" result="COLOR"></feFlood>
		
		<feComposite in="COLOR" in2="DROP" operator="in" result="SHADOW"></feComposite>
		
		<feOffset in="SHADOW" dx="20" dy="20" result="DROPSHADOW"></feOffset>
		
		<feMerge>
			<feMergeNode in="DROPSHADOW"></feMergeNode>
			<feMergeNode in="SourceGraphic"></feMergeNode>
		</feMerge>
	</filter>
  <image xlink:href="https://images.unsplash.com/photo-1495397112255-e790bee720b2?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D%0A&s=d480150af21569b65ea6b33b2183e8ff" x="0" y="0" width="100%" height="100%" filter="url(#filter)"></image>
</svg>
svg {
	margin: 3em;
	display: block;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.