CODEWITHSUNDEEP
svgsvg-filtersdropshadow
Brad Woods
Brad Woods

Reputation: 1546

SVG Drop Shadow Spread

I'm trying to manipulate SVG drop shadows (to emulate material design elements).

An element in material design contains 3 drop shadows of varying values depending on what level of elevation they are at. The best solution I have found to emulate this with an SVG element is to use CSS filter's drop shadow. This, however, doesn't support spread. Does anyone know a workaround that would allow me to manipulate the spread of the shadow? The only solution I can think of is creating 3 separate elements, 1 for each shadow and scaling that actual element, which seems over the top.

Upvotes: 5

Views: 2063

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31715

You can manipulate the spread of a shadow using feComponentTransfer/feFuncA. For example:

<feGaussianBlur stdDeviation="5"/>
<feComponentTransfer>
    <feFuncA type="gamma" exponent="0.5" amplitude="2"/>
</feComponentTransfer>

I wrote a tool mimicking Photoshop's dropshadow control outputting a valid SVG filter: you can use it (and see the source) here:http://codepen.io/mullany/pen/sJopz

Upvotes: 5

Related Questions