5

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.

Improve this question

1 Answer 1

Reset to default
5

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

Improve this answer
6

Not the answer you're looking for? Browse other questions tagged or ask your own question.