3 Easy Way To Add Drop/Box Shadow in WordPress?

If you’re running a WordPress blog or website, you might want to add some visual effects to your images to make them stand out.

One of the most popular effects is the drop shadow. A drop shadow is a simple but effective way to add depth and dimension to an image. In this blog post, we’ll show you how to add a drop shadow to your images in WordPress.

Before we begin, it’s worth noting that there are a few different ways to add a drop shadow to an image in WordPress.

We shall discuss two easy ways to add Drop Shadow to Images in WordPress.

• Adding Drop Shadow manually by using CSS
• Adding Drop Shadow by using Plugins.
• Adding Drop Shadow using Elementor Page Builder.

1. Adding Drop Shadow to WordPress Images using CSS

To add drop shadow to wordpress images using CSS is much easier than you think.

In fact, a single line of CSS code will do the trick.

Step 1: Upload your image to WordPress

The number uno step is to upload your image to WordPress Media Library.

To do this, head to your WordPress dashboard, navigate to Media >> Add New.

You can either drag and drop your image or click the Select Files button to upload image files from your computer.

Step 2: Insert your Image to your Post or Page

Once you have uploaded your image, you can insert it into your post or page.

Navigate to Posts >> All Posts or Pages >> All Pages based on where you want to insert your image.

The process of inserting image in your post or page slightly differs in Old Classic Editor and New Gutenberg Block Editor.

Step 2.1: To insert image in your Post or Page using Classic Editor

Open your post or page where you want to insert the image in Classic Editor.

Click on Add Media Icon as shown above to either upload your image from your device or insert the uploaded image from your library.

Or Press the shortcut key Shift + Alt + M to open your Add Media Window.

You can either click on Upload Files panel to upload your images files like mentioned in Step 1.

Or You can select the Media Library panel to choose and insert an uploaded image files from your library.

Step 2.2: To insert wordpress image in page or post using Gutenberg Block editor

The procedure to insert WordPress images in posts or pages is relatively simpler in Gutenberg Block Editor in contrast to Classic Editor.

First, open the page or post where you want to insert an image.

To do that, navigate to Posts >> All Posts or Pages >> All Pages based on your requirement.

Click on icon located in the top left of the top toolbar.

Search for Image widget in the popup.

After you have inserted the image block, click on Upload button.

Select your image from your media library.

Step 3: Add a CSS class to your image

Now that your image is inserted into your post or page, you need to add a class to it.

The class will allow you to apply the drop shadow effect to your image using CSS.

Adding a CSS class for Old Classic Editor and Gutenberg Block editor slightly differs.

Add CSS Class in Old Classic Editor

In order to add a class in your image, click on the image in the editor and then click the “Edit” icon.

In the Image Details popup, click on ADVANCED OPTIONS .

Under Image CSS class section, enter your CSS class. We have named our CSS class as “dropshadow“.

Click on Update to save your changes.

Add CSS class with Gutenberg Editor

To add CSS class to your images using Gutenberg Block Editor, first select your image block within your posts or pages.

Click on Settings icon next to Publish button at top toolbar.

Now click on Block Tab at the sidebar.

At the bottom of Block Tab, click on Advanced option.

Enter your CSS class for your image under ADDITIONAL CSS CLASS(ES). We have named our class “dropshadow“. You can name anything.

Step 4: Add CSS code

Now that you have added a class to your image, you can add the CSS code that will create the drop shadow effect.

To do this, navigate to Appearance >> Customize in your WordPress dashboard and click on the “Additional CSS” tab.

In the text area, add the following code:

.dropshadow { box-shadow: 2px 2px 5px rgba(0,0,0,0.3); }

This code creates a drop shadow effect with a 2px horizontal offset, a 2px vertical offset, a 5px blur radius, and a semi-transparent black color.

2. Add Drop Shadow to WordPress Images using Plugins

If you find adding CSS codes manually to be cumbersome. Then, you can easily add drop shadow to your wordpress images using free plugins and bypass all the hassle of coding.

Using Drop Shadow Boxes plugin

To employ a plugin for adding Drop Shadow to your WordPress images, first open your WordPress dashboard.

Navigate to Plugins >> Add New.

Search for Drop shadow in the search bar.

Select the Drop Shadow Boxes plugin. Install and activate the plugin.

Now, open the posts or pages where you want to add drop shadow by navigating to Posts >> All Posts or Pages >> All Pages.

After your open your post or page in the editor, click on the block inserter + icon and search for Drop Shadow Box.

This is how a drop shadow box gets inserted in your editor.

Click on + icon inside the inserted shadow box block. Now search for image in the popup. Then, upload you image to create a drop shadow effect for that image.

Configure settings for Drop Shadow Box plugin

Under the block tab at the sidebar, you can configure settings for the drop shadow box.

First click on the drop shadow box and under the Block Tab, configure settings according to your preferences.

Drop Shadow Effect

You can also change the default effect of the drop shadow from the dropdown list.

There are altogether 10 effects at your disposal. Select one according to your preference.

Inside and Outside Shadow

By default, both Inside and Outside Shadow are toggled on.

You can toggle on or off Inside and Outside Shadow according to your preference.

Colors

You can set the background color and the border color for the inserted drop shadow box.

The default background color for the for the drop shadow box is set to white. You can change that according to your styling preference.

To change background color, click on Background option under Colors section. Choose your color pallet.

To set or change border color, click on Border option just below it. Select your preferred color. You can also change the border width by sliding the values in pixels.

3. Adding Box Shadow In WordPress Using Elementor Page Builder

One of the easiest and the fastest way to add box shadow is by employing page builder plugins like Elementor , WP bakery, Divi and so on.

For this blog, we shall discuss the approach for adding box shadow in wordpress using Elementor.

Open the post or page where you want to implement Box shadow effect by navigating to Posts >> All Posts or Pages >> All Pages respectively.

After you have opened the post or page, click on button on the top toolbar.

Then, after Elementor is opened, click on the text or image block, where you want to add box shadow effect.

Note: Make sure the image or text where you want to add box shadow effect has a separate block else the parent block will only reflect the shadow effect.

Incase you want to add a new image widget in your Elementor text editor, search for Image widget in the search bar under ELEMENTS tab.

Drag and drop the Image widget in Drag Widget here section.

Now, hover over the Choose Image section and click on Choose Image to upload your image.

After you have uploaded the image, click on the Style tab and scroll down to Box Shadow section.

Configure the settings for Box shadow. You can slide the values for Horizontal, Vertical, Blur and Spread as per your preference and preview them accordingly. After you have made the changes, click on Update.

Wrapping up

Congratulations! You have made it to the end. You can now apply drop shadow effect to any images or blocks in WordPress without any hassle. Drop shadow effect is one of many CSS effects that will enhance the aesthetics of your site and enhance user experience.