Tutorial by Examples: dropshadow

HTML <p>My shadow always follows me.</p> CSS p { -webkit-filter: drop-shadow(10px 10px 1px green); filter: drop-shadow(10px 10px 1px green); } Result

JSFiddle: https://jsfiddle.net/UnsungHero97/80qod7aL/ HTML <div class="box_shadow"></div> CSS .box_shadow { -webkit-box-shadow: 0px 0px 10px -1px #444444; -moz-box-shadow: 0px 0px 10px -1px #444444; box-shadow: 0px 0px 10px -1px #444444; }

HTML <div class="box_shadow"></div> CSS .box_shadow { background-color: #1C90F3; width: 200px; height: 100px; margin: 50px; -webkit-box-shadow: inset 0px 0px 10px 0px #444444; -moz-box-shadow: inset 0px 0px 10px 0px #444444; box-shadow: inse...

JSFiddle: https://jsfiddle.net/UnsungHero97/80qod7aL/2/ HTML <div class="box_shadow"></div> CSS .box_shadow { background-color: #1C90F3; width: 200px; height: 100px; margin: 50px; } .box_shadow:after { content: ""; width: 190px; height: ...

<svg width="800px" height="600px"> <defs> <filter id="drop-shadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="4"/> <feOffset dx="5" dy="5" result="offsetblur"/> <f...

<svg width="800px" height="600px"> <defs> <filter id="complex-shadow" color-interpolation-filters="sRGB" x="-50%" y="-50%" height="200%" width="200%"> <!-- Take source alpha, offset it by angle/...