How to Easily Add Box Shadow in WordPress (4 Simple Ways)

How to Easily Add Eye-Catching Box Shadows in WordPress (2024 Guide)

Want to make certain parts of your WordPress site really "pop" and grab visitors‘ attention? Adding a subtle box shadow is an excellent way to make important content stand out from the rest of the page.

Box shadows (also known as drop shadows) create a 3D effect that makes an element look slightly raised off the page. When used strategically, they act as visual cues telling visitors "this part is important!"

In this guide, you‘ll learn how to easily add box shadows to your WordPress site in several different ways:

By adding custom CSS code (more advanced but offers total control)
With a free, beginner-friendly WordPress plugin
Using a drag-and-drop page builder plugin
With a premium plugin for creating advanced shadow effects without code

Whether you‘re a total beginner or an experienced developer, you‘ll find a method here that fits your skill level and needs. We‘ll walk you through each technique step-by-step with plenty of screenshots.

As a bonus, we‘ll pay special attention to one place where a shadow effect can have a big impact: your "coming soon" page. Adding a stylish text shadow is an excellent way to build anticipation for an upcoming site launch or product release.

Ready to start adding attention-grabbing shadows to your WordPress site? Let‘s dive in!

Method 1: Add Box Shadows with Custom CSS Code

Using custom CSS is the most flexible way to add box shadows in WordPress. With CSS, you have full control over the size, position, blur, and spread of your shadows.

The only downside is that this method requires working directly with code. But don‘t worry – we‘ll walk you through it and provide copy-and-paste CSS you can use even if you‘re not a developer.

Here are the steps:

Install and activate the free WPCode plugin. This handy plugin lets you easily add custom code snippets to your WordPress site without editing your theme files directly.
Go to Code Snippets > Add Snippet in your WordPress dashboard.
Give your snippet a name and set the Code Type to "CSS Snippet".
Paste the following CSS into the code box:

.my-shadow {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

Let‘s break down what each part of this code means:

0 – The horizontal offset of the shadow. Positive values move the shadow right, negative left.
10px – The vertical offset. Positive moves it down, negative up.
20px – The blur radius. Higher values give a wider, softer-edged shadow.
rgba(0,0,0,0.19) – The shadow color, specified as red/green/blue/alpha values. This dark gray shadow has 19% opacity.
, 0 6px 6px rgba(0,0,0,0.23) – Adding a comma lets you layer multiple shadows for a more complex effect. This second layer makes the shadow darker near the element.

Feel free to experiment with different values to customize the shadow size, softness and color to your liking. The changes will update in real-time in the preview.

Under "Insertion", choose "Auto Insert" and select the location where you want to add this CSS. "Site Wide Header" is a good choice to make it available across your entire site.
Activate the snippet and click Save Snippet. Your custom shadow CSS is now ready to use.
To apply the shadow to any element, simply add the my-shadow class to it. For example, here‘s how to add it to a button in the WordPress editor:

Open the page or post where you want to add the shadow.
Click the button to select it.
In the Block sidebar, look for the Advanced panel.
Under "Additional CSS classes" enter my-shadow.
Update the page to apply the shadow effect.

With this technique, you can define your shadow CSS once and easily apply it anywhere. Plus you can create multiple shadow styles just by adding new CSS classes.

Method 2: Add a Box Shadow using a Free Plugin

If you‘d rather not work with code, the free Drop Shadow Boxes plugin makes it super simple to add shadows using just the WordPress editor.

To use it:

Install and activate the free Drop Shadow Boxes plugin.
Edit or create a new post/page where you want to add a shadow box.
Click the plus icon to add a new block and search for "Drop Shadow".
Click the Drop Shadow block to insert it into your layout. You‘ll see an empty box placeholder appear.
To add content inside the shadow box, click the plus icon inside it. You can insert any other blocks you want, like text, images, or buttons.
With the Drop Shadow block selected, you‘ll see shadow settings appear in the block inspector sidebar. Use the preset styles or customize the shadow:

Width – Adjust the width of the entire shadow box
Effect – Choose Lifted, Perspective, Curved, or Shadow only
Interior Shadow – Enable or disable the interior shading
Exterior Shadow – Enable or disable the exterior shadow
Corners – Round the box corners
Background Color – Change the shadow box background color
Border Color – Change the shadow edge color
Alignment – Align the shadow box left, right or center
Padding – Adjust the interior spacing of the box

When you‘re happy with the result, publish or update the page to make your new shadow box live. Easy right?

While not as flexible as custom CSS, this plugin is perfect for quickly adding simple shadows without any technical know-how.

Method 3: Add Box Shadows with a Page Builder Plugin

Want to add shadows to custom-designed landing pages? Need an easy way to add shadows consistently across your entire site? A page builder plugin is a great solution.

Page builders let you create complex, professional-looking layouts using simple drag-and-drop controls – no coding needed. Many of them include built-in options for adding shadows to any element.

We‘ll use Beaver Builder for this example, but the popular Elementor and Divi builders have similar shadow options available.

To add a box shadow with Beaver Builder:

Install the Beaver Builder plugin on your WordPress site and activate it.
Create a new page and launch the Beaver Builder editor.
Insert any module (like a text or image module) into your layout where you want to add a shadow.
With the module selected, open the Style tab in the module settings panel.
Locate the Box Shadow setting and click to open the shadow controls:

Shadow – Toggle the shadow on or off
Shadow Preset – Choose from 5 preset shadow styles
Shadow Color – Pick any color for the shadow
Shadow Opacity – Adjust how transparent or solid the shadow appears
Shadow Horizontal & Vertical Location – Offset the shadow left/right and up/down
Shadow Blur – Increase the value to spread out and soften the shadow edges
Shadow Spread – Make the shadow larger or smaller than the element itself

Dial in the settings to get your perfect shadow, then click Save. Beaver Builder will instantly show a live preview as you make changes.

Using a page builder means you can create an entire site with consistent, professional shadow effects and no coding at all. Most premium WordPress themes also come bundled with a page builder these days.

Method 4: Use a Premium Plugin for Advanced Shadows

What if you need even more control over your shadows but still want to avoid writing code? A premium plugin like CSS Hero can help.

CSS Hero is a powerful visual CSS editor for WordPress. It lets you point-and-click to change any CSS styles – including super precise shadow options – without actually writing CSS yourself.

After installing CSS Hero on your WordPress site, here‘s how to visually add a box shadow:

Navigate to the page where you want to add the shadow while logged into WordPress.
Open the CSS Hero editor by clicking the "Customize with CSS Hero" admin bar link.
Click the element you want to apply the shadow to. This will open the CSS Hero inspector showing all the styles you can customize.
Click the "Extra" tab in the inspector.
Scroll down and click "Make shadow" to expand the shadow options:

Position – Choose outside or inset shadow
Color – Set any color and opacity level for the shadow
Blur – Spread the shadow out and soften the edges
Spread – Expand the shadow size beyond the element boundaries
Use the Position grid to precisely place the shadow by clicking and dragging

CSS Hero shows changes in real-time, so you can freely experiment with settings to dial in the perfect shadow effect. When you‘re finished, click "Save & Publish" to make it live.

The main advantages of this method are 1) it works with any WordPress theme and 2) you can create advanced effects like semi-transparent shadows, inner shadows, and layered multi-color shadows without coding.

Bonus: Add a Stylish Text Shadow to Your Coming Soon Page

A "coming soon" page is the perfect place to use an eye-catching shadow effect. You can use a stylish text shadow on your main headline to build anticipation and make your message really pop.

Most of the techniques we‘ve covered can be used to create a text shadow, but let‘s see how to pull it off using custom CSS.

First, make sure you‘ve created a coming soon page for your site. The free SeedProd plugin makes this a snap – just follow our tutorial on how to quickly create a coming soon page in WordPress.

Once your page is ready, add the following CSS either in your child theme‘s stylesheet or using the WPCode plugin method described earlier:

.coming-soon-header {
  text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

Then add the "coming-soon-header" class to the headline element on your coming soon page.

This CSS uses multiple text-shadow declarations stacked together to create a long shadow with graduated colors. The result is a professional, high-contrast 3D effect:

[Insert example screenshot of a coming soon page headline with a long text shadow]

The great thing about using CSS is you have total control to customize the shadow. Try using your brand colors, adjusting the offset and blur values, or stacking fewer shadows for a more subtle effect.

Wrap Up

Used well, box shadows are an effective way to add depth to your designs and steer visitors‘ attention to your most important content. With the techniques covered in this guide, you‘re ready to start enhancing your WordPress site with beautiful shadow effects.

To recap, here are the main approaches we looked at:

Using custom CSS – Most flexible but requires coding knowledge
Free plugin – Easiest way to add simple shadows with no technical skills
Page builder plugin – Great for visually adding shadows across an entire site
Premium plugin – For advanced effects and maximum control without code

Each method has its strengths, so choose the one that best fits your specific needs and skill level.

Whichever route you go, remember to use shadows purposefully and in moderation. Not everything needs a shadow! Apply them strategically to key elements like buttons, opt-in forms, and important text. When in doubt, keep your shadows subtle and consistent.

Now go put your new shadow skills to work and wow your WordPress visitors!