Adding a shadow
See original GitHub issueIs it even possible to add a shadow to an image?
I have been trying to add a shadow to an image but I doesn’t seem possible.
I couldn’t get the simple shadow running because when you create a shadow with SVG, for example:
<svg width="200" height="200">
<defs>
<filter id="shadow">
<feDropShadow dx="4" dy="8" stdDeviation="4"/>
</filter>
</defs>
<circle cx="50%" cy="50%" r="80" style="filter:url(#shadow);"/>
</svg>
and overlay that with overlayWith(Buffer.from(<ABOVE SVG>), { cutout: true })
it will simply ignore the filter (shadow) and cut it out like i wasn’t there.
The idea I have as a workaround is make an SVG that is the same shape and size, position it behind the image and add a blur to the SVG.
<svg width="200" height="200">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" fill="yellow" filter="url(#f1)" />
</svg>
Here is an HTML example of how that would look (JSFiddle):
<svg width="200" height="200">
<filter id="blurMe">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
<circle cx="60" cy="60" r="50" fill="black" filter="url(#blurMe)" id="shadow" />
<circle cx="60" cy="60" r="52" fill="dodgerblue" id="image" />
</svg>
The problem with this idea is I don’t know how to stack layers in Sharp.
Thank you in advance.
Issue Analytics
- State:
- Created 5 years ago
- Comments:9 (2 by maintainers)
Top Results From Across the Web
How to add shadows in Photoshop - Adobe
1. Create shadow and highlight layers. · 2. Determine the light source and draw your highlights. · 3. Repeat for the shadows. ·...
Read more >How to add a shadow to an element - Learn web development
Shadows are a common design feature that can help elements stand out on your page. In CSS, shadows on the boxes of elements...
Read more >How to Add a Drop Shadow in Photoshop (Step by Step)
Step-1: Separate Your Target Object from the Background. Select your photo (which you want to add the shadow). Open your layer palettes (go...
Read more >CSS Shadow Effects - W3Schools
To add more than one shadow to the text, you can add a comma-separated list of shadows. The following example shows a red...
Read more >Photoshop Tutorial: How to Create a Realistic Drop Shadow
Tutorial: How to create a realistic shadow in Photoshop · Isolate your object from the background · Create a new background behind your...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Came across this issue while trying to do something similar,
feDropShadow
is still unsupported but I managed to achieve what I wanted to do by blurring a rectangle (an svg the same size as the input image, with a margin) to act as the shadow and then using composites. Hope this helps anyone looking for the same thing!@armandoarmando Actually, you’re adding shadow to your circle mask not adding shadow to compositing result. That’s why you can see blurry edge. I think you can add another circle with shadow in the background.