Here are some filters that provide different types of effect: Drop shadow (transparent black shadow with slight offset) Black glow (with a fixed colour) Object-coloured glow (takes the colour of the object to which it is a applied) An example: There’s a demo here. The code: <!– a transparent grey drop-shadow that blends with the … Read more
The filter canvas has default values : x=y=-10% and width=height=120%. You can change them with the x, y, width and height attributes on the filter element. Try to set a bigger canvas : <filter x=”-50%” y=”-50%” width=”200%” height=”200%”/> Yet, since the canvas is bigger, there will be performance loss.
One way is to add a feComponentTransfer filter primitive, like this: <filter id=”dropshadow”> <feGaussianBlur in=”SourceAlpha” stdDeviation=”3″/> <feOffset dx=”2″ dy=”2″/> <feComponentTransfer> <feFuncA type=”linear” slope=”0.2″/> </feComponentTransfer> <feMerge> <feMergeNode/> <feMergeNode in=”SourceGraphic”/> </feMerge> </filter> A live example can be seen here.
You need to increase the size of the filter region. <filter id=”SVGID_0″ y=”-40%” height=”180%”> works just fine. The silent defaults for the filter region are: x=”-10%” y=”-10%” width=”120%” height=”120%” – large blurs usually get clipped. (Your shadow isn’t getting clipped horizontally because your width is about 2.5x your height – so that 10% results in … Read more
The key in this case is to define an initial color. White nor black or any gray-scale is technically an actual color – you can’t saturate or rotate it. You’ll have to “colorize” it somehow, and the sepia filter is the only filter which do some form of colorizing. It would be easier if your … Read more
Use the new CSS filter property. Supported by webkit browsers, Firefox 34+ and Edge. You can use this polyfill that will support FF < 34, IE6+. You would use it like so: /* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */ .shadow { -webkit-filter: drop-shadow( 3px 3px 2px … Read more