A quick question, the answer is probably no, but can you add a drop shadow to an SVG logo? Not a box shadow, but to give the logo a drop shadow in the same way a drop shadow is applied to text?
I have searched the forum, but not found anything!
Thanks in advance for telling me this can’t be done!
Tom
.svg-shadow {
filter: drop-shadow(5px 5px 12px rgba(0, 0, 0, 0.5));
}
Awesome, thank you. Could you tell me, a non-coder, how and where to apply this code please?
Cheers,
Tom
Fantastic, thank you both. Have a great day 
Tom
Thank you, Richards and Marinator. I’ve been able to use drop shadows now on many of my SVG pics and logo.
Our website is www.prisonministry.org
Just so you know, your link at the bottom right that reads “Complete your gift to make an impact” is covering your back-to-top button.
Also, for some odd reason, I noticed the back-to-top button has a slight delay when you click it when viewing your website in Chrome. It works fine in Firefox. I’m guessing you used JavaScript for this button? Might want to check into this.
printninja,
I do not see the link “Complete your gift to make an impact” at the bottom of any page on my site. Could you tell me what page and post a pic of it?
Yes, I’m using JavaScript. Do you know of a different way to code back-to-top which has no delay?
Here’s a screenshot showing the issue…
Any link can take you to the top of the page simply by setting the target to Top. The option is accessible via the Options panel. See below…
I make my back-to-top buttons using features available within BSS. I just added one to the online library if you want to try it. Just search for Ultimate Back To Top Button. It’s a very simple component. It looks like this…
printninja,
I just added the Ultimate Back To Top Button to our site. Thank you. It works much better than the JavaScript. 
I still do not see the link “Complete your gift to make an impact” at the bottom of any page on my site. What is the OS you are using? We use Windows 11. Were you attempting to try the donation form? I cannot figure out any way this link would show up. 
Glad the button worked out for you 
It seems to be a widget called dbox-reminder-widget. I was not attempting to do a donation. It simply appeared on the bottom right of the home page when I opened your website.
I am using Windows 7, which is probably the problem. The pic above is a screen capture from Chrome Version 109.0.5414.120 (Official Build) (32-bit) which is the latest version that will run on Windows 7, however I also checked it in the latest desktop Version of Firefox, and it also appears in that browser.
I checked it on my Android phone in both the latest versions of Chrome and Firefox, using both mobile and desktop options on the browsers, and DO NOT see it on my phone.
This leads me to believe it’s a bug in the widget specifically related to running in the Windows 7 environment. Since Windows 7 is now considered obsolete, they probably never tested the widget in Windows 7 when they developed it.
Not really sure how big a deal it is, since only about 3%-5% of computers are still running Windows 7.
printninja,
Your help has been extremely valuable. Thanks.
The problem was caused by 2 JavaScripts by DonorBox for their donation forms. I inserted the JavaScripts into the Head Content section years ago (we began using DonorBox back in 2017) and when I made the decision to change to Qgiv in February 2023, I forgot to delete all instances of DonorBox. The phrase “Complete your gift to make an impact” didn’t show in Windows 11, so I didn’t think anything was wrong. 
I learned something extremely useful to all who design their websites, either for themselves or for others, check for old JavaScripts and any references to scripts no longer used. They might just appear messing up the website for viewers using older operating systems, etc.
printninja, one last favor, could you please check out our website again (after clearing the cache)? If I’m correct, the “Complete your gift to make an impact” should not show up anymore.
Thanks.
To all others viewing this forum - this is the most helpful forum I’ve ever used. The members replying have helped me a lot over the years with my using Bootstrap Studio. They go out of their ways to solve problems of other members. Thanks to all of them.
Hi, does anyone know why this drop shadow effect no longer works in Safari 17.6 on Mac? The shadow is around the box, not the SVG graphic. It works OK in Chrome on Mac.
I am seeing the same problem on iPhone (Safari and Chrome), but not on iPad (Safari and Chrome) where it works OK.
It shows as being supported. Maybe upgrade to the latest version of Safari?
So, svg-shadow does not work on my iPhone in Safari and Chrome. iOS and browsers are up-to-date.
It was working properly on my iPad in Safari and Chrome with the iPad on iOS 17. Last night I updated my iPad to iOS 18.2 and now this svg-shadow is not working in Safari or Chrome. The shadow is around the image box, not the svg element (screenshot attached).
I cannot update my MacPro, so that is stuck on MacOS 12.7.6. The shadow works in Chrome 131.0.6778.205 but not Safari 17.6.
My MacBook Pro is running MacOS 14.7 and the shadow is working correctly in Safari 18.1 and Chrome 131.0.6778.205!!!
Can anyone help or suggest an alternative way to apply the shadow to the SVG image?
I’ve just tried on my ipad which is also using iOS 18.2 and it works fine.
I was going to suggest using -webkit-filter as well as filter, but I can’t reproduce your issue.
Check this link: https://svgshadowtest.bss.design/ what do you see?
Thanks richards, your link works perfectly on all devices. It must be my code. I’ll post back here in the next week or so (gonna be busy for a few days now!) with some BSS screenshots and see if you guys can figure out what I’ve done wrong.
Thank you, and Happy Christmas to you all
Feel free to post a link to your site and I can take a look too. PM me if you prefer
