[Resolved] Add drop shadow to logo image via CSS?

Home Forums Support Add drop shadow to logo image via CSS?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1353107
    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.

    #1353146
    Leo
    Staff
    Customer Support

    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

    #1353284
    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?

    #1353440
    David
    Staff
    Customer Support

    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;
    }
    #1353861
    Wes

    That did the trick. Thank you both!

    #1353867
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.