[Support request] Adding a border shadow to images

[lewis]

Hi all, I am looking to add a grey shadow effect just like the images on this website https://www.homemade-gifts-made-easy.com/unicorn-coloring-pages.html . Just wonder how this is achieved. I have also added a link to my site with a similar layout and images. Thanks

[Fernando]

Hi Lewis,

If you have GB Pro, you can use a GB Image Block and do it through the Effects section. Reference: https://docs.generateblocks.com/article/effects-overview/

Otherwise, you’ll need custom CSS. Are you planning to add this to all images in your site?

[lewis]

Hi Fernando. I have GP Pro, but have just been using the normal Gutenberg blocks, so would have to be CSS. I am only planning to add this to certain images on the website ideally.

[Fernando]

I see.

Add add-box-shadow to the class list of the images.

Then, add this CSS:

.add-box-shadow {
    box-shadow: 0 0 10px 0 rgba(0,0,0,.75);
}

[Author]

Posts