How to Add Shadow Border to Image on WordPress | Adding shadows to images can make them stand out and give your WordPress site a more polished and professional look. WordPress offers multiple ways to achieve this, whether you want to add subtle depth or dramatic effects. This tutorial will explore adding image shadows using built-in WordPress tools, plugins, and custom CSS.

How to Add Shadow Border to Image on WordPress

Method 1: Using the WordPress Block Editor (Gutenberg)

If you’re using the WordPress block editor, you can easily add shadows to images by following these steps:

Step 1: Insert an Image Block:

➤ Open the post or page where you want to add an image.

➤ Click the “+” icon to add a new block.

➤ From the block selection menu, choose the “Image” block.

Step 2: Add an Image:

➤ After adding the image block, you can either upload a new image from your computer or select an existing image from your Media Library.

➤ Once the image is added, it will appear in the editor.

Step 3: Apply a Shadow Effect:

➤ Click on the image block to highlight it.

➤ You’ll find the block settings panel on the editor’s right-hand side.

➤ Look under the “Styles” or “Advanced” tab to see if your theme or block settings include shadow options.

➤ If shadow options are available, adjust them to your preference, such as the shadow’s size, blur, or intensity.

Note: Not all themes or block settings include shadow options by default. If you don’t see these options, you can explore plugins or use custom CSS, as explained below.

Method 2: Using a WordPress Plugin

Plugins are an excellent choice for users who want more advanced or customizable shadow effects. Here’s how to use two popular plugins:

1. Box Shadow WordPress Plugin:

• Go to your WordPress dashboard and navigate to Plugins > Add New.
• Search for “Box Shadow” in the plugin repository.
• Install and activate the plugin.
• After activation, go to the plugin settings or edit your image block to see new shadow options.
• Customize shadow settings such as blur radius, horizontal and vertical offset, spread, and shadow color.
• Save your changes and preview your post or page to see the effects.

2. CSS Hero:

• Download and install the CSS Hero plugin from their website or the WordPress repository.
• Activate the plugin and start the visual editor.
• Select the image you want to modify and use the interface to visually apply shadow effects.
• CSS Hero allows you to adjust shadow properties in real time without requiring any coding knowledge.

Method 3: Adding Image Shadows with Custom CSS

For those comfortable with some coding, custom CSS provides the most flexibility. Follow these steps to add shadows using CSS:

Step 1: Access the Customizer:

• Log in to your WordPress dashboard.
• Navigate to Appearance > Customize.
• Click on the Additional CSS section to open the CSS editor.

Step 2: Add Custom CSS Code:

➤ Copy and paste the following code into the CSS editor:

img {
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
    border-radius: 5px; /* Optional: Adds rounded corners */
}

➤ This code shadows all images on your website. Adjust the 10px 10px 15px values to modify the shadow’s position, blur, and spread.

➤ Save your changes and preview your website for the updated effect.

Step 3: Target Specific Images:

➤ If you want to add shadows to specific images, use a custom class. For example:

.shadow-image {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

➤Go to the block editor and select the image you want to style.

➤ In the “Advanced” section of the block settings, add the class shadow-image.

➤ Save your changes and preview the page to see the shadow effect applied to that image.

Method 4: Enhancing Shadows with Hover Effects

Make your images interactive by adding hover effects. This technique works exceptionally well for image galleries and call-to-action visuals. Follow these steps:

Step 1: Add Hover CSS:

➤ In the Custom CSS editor, add the following code: img:

img:hover {
    box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
    transform: scale(1.05); /* Optional: Slight zoom effect */
    transition: all 0.3s ease-in-out;
}

➤ This code enhances the shadow and slightly enlarges the image when hovered over by a user.

Step 2: Test the Effect:

➤ Save your changes and preview your website.

➤ Hover over images to see the shadow and zoom effect.

Conclusion

Adding image shadows to your WordPress site is a simple yet effective way to enhance its visual appeal. Whether you prefer using the block editor, plugins, or custom CSS, there’s an option for every skill level. Experiment with different shadow styles to find the look that best suits your site’s design.

Have you tried adding image shadows to your WordPress site? Share your tips or favorite methods in the comments below!

If you want a detailed tutorial on how to add a shadow border to the image on WordPress for the Divi theme, you can look at the tutorial on how to add a shadow to the image in the Divi theme.

FAQ

References

1. https://theme4press.com/give-images-shadows-wordpress/
2. https://ultimateblocks.com/how-to-add-drop-shadow-to-images-in-wordpress/