# Photoshop-Style Drop-Shadows Using Web filters

This demo uses SVG filters to duplicate PhotoShop's drop shadow control. Things to note: applying an SVG filter to HTML text via a CSS filter clips the shadow to a specific region around HTML text (In SVG, this region's size is configurable). Browser errata: Safari: CSS filters don't yet support SVG compositing so it won't show a drop shadow on the HTML text. IE: while the output works fine on SVG text, IE doesn't support CSS filters yet, and the form inputs below don't quite work (range and event detection problems).

## HTML ## Text |
Color |
Opacity % |
Angle (deg) |
Distance (px) |
Spread (x) |
Size (px) |
Contour |
Noise % |

<filter id="drop-shadow" color-interpolation-filters="sRGB" x="-50%" y="-50%" height="200%" width="200%">

<!-- Take source alpha, offset it by angle/distance and blur it by size -->

<feOffset id="offset" in="SourceAlpha" dx=" 3.54 " dy=" 3.54 " result="SA-offset"/> <feGaussianBlur id="blur" in="SA-offset" stdDeviation=" 3 " result="SA-o-blur"/>

<!-- Apply a contour by using a color curve transform on the alpha and clipping the result to the input -->

<feComponentTransfer in="SA-o-blur" result="SA-o-b-contIN"> <feFuncA id="contour" type="table" tableValues=" 0 1 "/> </feComponentTransfer>

<feComposite operator="in" in="SA-o-blur" in2="SA-o-b-contIN" result="SA-o-b-cont"/>

<!-- Adjust the spread by multiplying alpha by a constant factor --> <feComponentTransfer in="SA-o-b-cont" result="SA-o-b-c-sprd"> <feFuncA id="spread-ctrl" type="linear" slope=" 1 "/> </feComponentTransfer>

<!-- Adjust color and opacity by adding fixed offsets and an opacity multiplier --> <feColorMatrix id="recolor" in="SA-o-b-c-sprd" type="matrix" values=" 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .8 0 " result="SA-o-b-c-s-recolor"/>

<!-- Generate a reasonably grainy noise input with baseFrequency between approx .5 to 2.0. And add the noise with k1 and k2 multipliers that sum to 1 --> <feTurbulence result="fNoise" type="fractalNoise" numOctaves="6" baseFrequency="1.98"/> <feColorMatrix in="fNoise" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 7 -3" result="clipNoise"/> <feComposite id="noisemix" operator="arithmetic" in="SA-o-b-c-s-recolor" in2="clipNoise" k1=" 0 " k2=" 1 " result="SA-o-b-c-s-r-mix"/>

<!-- Merge the shadow with the original --> <feMerge> <feMergeNode in="SA-o-b-c-s-r-mix"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter>