Search

How to Add Box Shadow to an Image in Gutenberg

Box shadows are a great way to add depth and interest to your images. They can also create a sense of hierarchy on your page by making specific images stand out more than others.

This tutorial will show you how to add the box shadow to the images in Gutenberg without the help of any third-party plugin. Improve the aesthetics of your website, create a lasting impression on visitors, and unleash a creative potential that will set your web design abilities apart from the competition.

Steps to Add the Box Shadows to the Images in WordPress Gutenberg Editor

Step 1: Add the Additional Custom CSS

First, you need to add additional custom CSS to your WordPress site.

On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS. Copy the CSS snippet below and paste it into the input field.

Note: If you’re using a block theme, click here to learn how to enable Theme Customizer on your WordPress site.

.image-shadow{
box-shadow:5px 8px 10px 2px #55531b ;;
}

Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.

Step 2: Add the Additional CSS Class

Next, we will add a unique CSS class name to the blocks with image elements (Image, Gallery, etc.).

Go to the Gutenberg WordPress editor to create new content (page/post) or select your existing content. Afterward, choose any block you want to add the box shadow to. In this example, we will add the box shadow for the Image block.

Afterward, go to the Block settings -> Advanced. Next, add your CSS class specified into the ADDITIONAL CSS CLASS(ES) input field. You can add the class name "image-shadow“.

Once you add the additional CSS class, preview your page in a new tab to see the result.

If you are happy with the box shadow applied to your image ( as in the image above), keep it like this and save or publish your project if you want to. But, if you’re going to use a different box shadow color for your image, you can edit the CSS snippet more specifically on the boxshadow property values (see the image below).

Replace the shadow values of each side (top, right, left, bottom) and the hex color code. Or you can also use the help of online box shadow generators to create your desired box shadow styles (color, spread, fade, etc.). In this example, we use the Angry Tools.

The Bottom Line

This tutorial shows how easily you can add the box shadow to the images in the WordPress Gutenberg editor without the help of any third-party plugin. Adding the box shadow to an image is a simple yet effective way to enhance the visual appeal of your content and make it engaging for your website visitors.

Experiment with different shadow styles to find the perfect fit for your images and content. We hope this article is helpful, and if you have any questions or feedback, please don’t hesitate to contact us.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment