Add drop shadow to logo image via CSS?

[Wes]

First time request here as I’ve exhausted my other options. Any help will gladly be rewarded in coffee on me (please provide link). Should be a simple one for you…

I just want to add a blurred drop shadow to the logo image, preferably via CSS since I’ve failed in Pixlr/Canva. Everything should be normal as the logo was uploaded through Customize > Site Identity.

[Leo]

Hi there,

Try something like this:

.navigation-branding, site-logo img {
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

You can tweak the shadow with a site like this:
https://www.cssmatic.com/box-shadow

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Wes]

Hey Leo,

Definitely a step in the right direction. It looks like the drop shadow is being applied to a background box that spans taller/wider than the logo.

I can confirm the logo image is cropped down so there’s no extra white space around the border. Do you know of anything we could do to make the shadow follow the border of the logo?

[David]

Hi there,

try this:

.site-logo img {
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    padding: 0 !important;
}
.site-logo a {
    margin: 15px 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Wes]

That did the trick. Thank you both!

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts