Últimas notícias da SeedProd

Tutoriais, dicas e recursos do WordPress para ajudar a expandir seus negócios

How to Add a Box Shadow in WordPress: 4 Easy Ways 

Escrito por: avatar do autor Stacey Corrin
avatar do autor Stacey Corrin
Stacey escreve sobre WordPress e marketing digital há mais de 10 anos e sobre outros tópicos há muito mais tempo. Além disso, ela é fascinada por web design, experiência do usuário e SEO.
     Avaliado por: reviewer avatar Turner John
reviewer avatar Turner John
John Turner é o cofundador da SeedProd. Ele tem mais de 20 anos de experiência em negócios e desenvolvimento e seus plug-ins foram baixados mais de 25 milhões de vezes.

Want to make your website elements pop and grab your visitors’ attention? Adding a simple box shadow can instantly improve your design, making images, buttons, or content sections stand out.

In this guide, I’ll share 4 easy ways to add a box shadow in WordPress so you can highlight the content that matters most.

Why Should You Add a Box Shadow in WordPress?

A box shadow creates a subtle illusion of depth by mimicking the shadow that an object would cast, making it appear slightly raised from the background. This simple effect can dramatically change how visitors perceive your content.

Our brains are naturally drawn to contrast and separation, principles rooted in Gestalt psychology. Adding a box shadow creates a visual separation between elements, instantly guiding your visitors’ eyes to the most important areas of your website.

This means box shadows can actually help your website perform better:

  • Boost Conversions: Highlight calls-to-action like buttons or forms to encourage clicks and conversions.
  • Emphasize Images: Make images pop from the background, drawing attention and enhancing their impact.
  • Improve User Experience: Create a more visually appealing and organized layout, making your website easier and more enjoyable to navigate.

Below, you’ll find 4 easy ways to add these effects to your WordPress site.

Method 1: Add a Box Shadow in WordPress Using a Page Builder (Easiest)

Now that you understand the power of box shadows, let’s create one. This method is perfect for visual learners and anyone who wants a code-free solution. I’ll use SeedProd to add a stylish box shadow in just a few clicks.

Construtor de sites WordPress SeedProd Drag and Drop

SeedProd is the best WordPress website builder, with over 1 million users. With its drag-and-drop page builder, you can create high-converting landing pages and websites and customize every inch of your design without writing code.

You can also add box shadows to any design element by pointing and clicking.

To begin, install and activate SeedProd on your WordPress website. For more details, see our guide on how to install SeedProd.

Note: SeedProd’s free version has everything you need to add box shadows in WordPress. However, I’ll use the premium version for this guide because it has more advanced templates.

After activating the plugin, navigate to SeedProd » Landing Pages from your WordPress dashboard. Then, click the Add New Landing Page button.

adicionar nova página de destino SeedProd

Here, choose a pre-made, fully customizable design for your page. SeedProd’s templates make it easy to find a look that fits your brand, and you can tweak every detail to make it your own.

Modelos de página de destino do SeedProd

Click the filters at the top to browse, then hover over a template and click the checkmark icon to select it.

Escolha um modelo de página de destino

Now, you can enter a name for your page, and SeedProd will automatically set the URL. Including keywords relevant to the page in the URL is a good idea, as this can improve your WordPress search engine optimization.

Enter landing page name and URL

If you don’t want to keep the generated URL, click inside the ‘Page URL’ field and type in your own.

You can now click the Save and Start Editing the Page button to launch your design in the page builder interface.

SeedProd’s drag-and-drop builder shows a live preview of your design on the right. On the left-hand side, there is a panel with blocks you can drag onto the page.

SeedProd drag-and-drop interface

When you find a block you want to add, click, drag, and drop it onto the live preview. Then, you can select the block to customize its appearance and settings.

For example, clicking the Headline block lets you enter your own text and change the font size, color, and alignment.

Customize headline block SeedProd

You can also move blocks around the page by dragging and dropping them. For detailed instructions, please see our guide on how to create a landing page in WordPress.

If you want to add a box shadow to a block, you’ll need to click the Advanced tab in that block’s settings.

In this example, I want to add a box shadow to each feature box. So, I’ll click the column settings and select the Advanced tab.

Advanced Block Settings SeedProd

Next, click the ‘Shadow’ dropdown menu and select an option, such as Hairline, Small, Medium, Large, X Large, and so on.

SeedProd box shadow settings

Upon choosing a shadow, the preview will update automatically. You can experiment with different styles until you find one that works.

If the pre-made styles don’t work for you, choose the ‘Custom’ option. This option opens new customizations to change the blur, spread, color, shadow position, and more.

Custom box shadow settings SeedProd

In the end, I chose the 2X Large option and repeated the process for each block in the grid.

2X Large Box Shadow SeedProd

After adding the box shadow, you can continue customizing your page by adding more blocks and shadows.

When you’re happy with how everything looks, click Save in the top-right corner and select Publish to make your page live.

Publique sua página de destino

Here is an example of how my final page looks, complete with the new box shadows:

SeedProd add a box shadow in WordPress example

Method 2: Add a Box Shadow in WordPress with CSS Code (More Control)

Adding a box shadow to every element on your website can make it look cluttered. Instead, it’s best to use them to highlight important content and keep your design consistent.

The easiest way to do this is by setting your box shadow style with CSS, and I’ll use WPCode to make it super simple.

WPCode is a popular code snippet plugin that lets you add custom code to your WordPress site without editing your theme files directly. This keeps things organized and helps you avoid accidental errors.

The first thing you’ll need to do is install and activate the free WPCode plugin. For a full walkthrough, see this guide on how to install a WordPress plugin.

After activating the plugin, go to Code Snippets » +Add Snippets from your WordPress admin.

Adicionar um novo trecho de código no WPCode

On this page, you’ll see pre-made custom code snippets to add to your website. To add your own, hover your cursor over the ‘Add Your Custom Code’ option and click Add Custom Snippet.

After the page loads, type a name for your snippet to help you identify it. Then, select the ‘CSS Snippet’ option in the ‘Code Type’ dropdown menu.

WPCode CSS Snippet

Now add the following code snippet into the code editor:

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

You can replace the px values in the snippet to customize the shadow you want to make.

Let’s break down those numbers so you know exactly what’s happening:

  • .custom-box-shadow: This is the name of the CSS class we’re creating. We’ll use this to apply the box shadow to specific elements.
  • Box-shadow: This tells the browser we’re about to define a box shadow.
  • 5px 5px: These first two values are the horizontal and vertical offset of the shadow. The first value moves it right, the second moves it down. Play around with these to adjust the shadow’s position.
  • 10px: This is the blur radius. Higher numbers create a softer, fuzzier shadow. Lower numbers keep it sharp.
  • rgba(0, 0, 0, 0.2): This sets the shadow’s color. We’re using a semi-transparent black here. The last number (alpha) controls transparency—0 is completely transparent, and 1 is fully opaque.

Once you’re happy with the snippet, scroll down to the Insertion section to define where WPCode should add it. To use it across your website, choose the ‘Auto Insert’ option and set the location as Site Wide Header.

Auto Insert WPCode Snippet Site Wide Header

Now, scroll back to the top of the page and switch the ‘Inactive’ toggle to the ‘Active’ position. Then, go ahead and click the Save Snippet button.

Activate Code Snippet in WPCode

The next step is to add the custom CSS class to any WordPress block. To do this, select any block in the WordPress block editor and click ‘Advanced’ in the left-hand menu.

Advanced WordPress block options

In the ‘Additional CSS Classes’ field, type ‘custom-box-shadow.’

Custom box shadow CSS class in WordPress block

Then, when you’re happy with the post, you can click ‘Update’ or ‘Publish.’ You can then visit the post and see your box shadow in action.

WordPress custom paragraph box shadow with CSS

Method 3: Add a Box Shadow Using a Free Plugin (Quick Alternative)

If you’re uncomfortable working with code snippets, you might prefer to create shadows using Drop Shadow Boxes. This free WordPress plugin lets you add box shadows to any block using the built-in WordPress block editor.

First, install and activate the plugin on your website. Since there are no configurable settings, you can use the plugin immediately.

Next, create or edit a WordPress post or page. Inside the editor, click the plus (+) icon to add a new block and search for ‘drop shadow.’

Add the Drop Shadow Box block to WordPress editor

When it appears, click it to add it to your page. You’ll see a drop shadow on an empty block, so let’s add some content.

Add new block to drop shadow box block

Inside the drop shadow block, click the plus icon, add a block, and set it up as usual. For example, I’ve added an image block and picked an image from the WordPress media library.

Image in drop shadow box block

Next, click the block to see the box shadow settings on the left-hand sidebar.

The shadow width is set automatically by WordPress but you can change it by choosing ‘pixels’ or ‘%’ from the ‘Width’ drop-down box. Then, you can use the slider to adjust it.

You’ll also notice otter effects like curved edges and a ‘Perspective’ effect. To preview them, open the ‘Effect’ dropdown and choose one from the list.

Drop shadow effects

Other options you can experiment with include inside and outside shadows, border colors, border pixels, and rounded corners.

Drop shadow border and background colors

Once you’re happy with the box shadow, repeat these steps for other blocks, or click ‘Update’ or ‘Publish’ to make your changes live.

Here is how my box shadows look using this method:

Add a box shadow in WordPress with a plugin example

Method 4: Add a Box Shadow Using CSS Hero (Advanced)

If you’re not comfortable working with code but still want to create advanced box shadows, then CSS Hero is a great option.

This premium plugin lets you fine-tune every part of your WordPress theme without writing a single line of code. You can also create unique shadows for each block, making it ideal for experimenting with different shadow effects across your site.

To begin, install and activate the CSS Hero plugin. Then, follow the product activation instructions to link your CSS Hero account with your WordPress site.

Now, click the ‘Customize with CSS Hero’ option in your admin toolbar to open the CSS Hero editor.

Customize with CSS Hero

By default, the CSS Hero editor shows a live preview of your website and a panel where you can edit each element of your web design.

CSS Hero interface

If you’re not on the page where you want to add the box shadow, use the icons at the top of the screen to switch from ‘Select’ to ‘Navigate’ mode.

CSS Hero navigate mode

Now, you can go to the page you want and switch back to Select mode.

Next, click any element in the preview where you want to add a box shadow, such as an image, button, paragraph, or other content.

When you’ve done that, click ‘Extra’ in the left-hand panel.

By default, the box shadow option shows ‘None,’ so click the Make Shadow button.

Make a Shadow in CSS Herro

First, change where the shadow appears. In the Shadow Position settings, you can choose ‘Inside’ or ‘Outside’.

CSS Hero Shadow position

Next, work on the shadow’s angle in the Orientation section. Simply drag the circle until the box shadow angle is in the position you want.

Shadow orientation in CSS Hero

Finally, change the shadow color using the dropper tool and use the sliders to control the shadow blur and spread.

Shadow color in CSS Hero

Use the same approach to add a box shadow to other areas of your website. Then, when you’re happy with how everything looks, click the Save & Publish button.

Now, visit your changes to see how they look live on your website.

Example of Add a Box Shadow in WordPress using CSS Hero

More Ways to Customize Your WordPress Website

The methods I’ve covered in this guide are ideal for adding box shadow effects in WordPress. But if you want to add more creative effects, you’ll find the following guides helpful:

I hope this guide has helped you learn how to add a box shadow in WordPress. Now, you can instantly improve your website’s design and highlight your most important content.

Ready to take your WordPress skills further? Get started with SeedProd and create stunning, high-converting landing pages and websites without coding.

Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, fique à vontade para deixar um comentário com perguntas e feedback.

Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.

avatar do autor
Stacey Corrin Escritor
Stacey escreve sobre WordPress e marketing digital há mais de 10 anos e sobre outros tópicos há muito mais tempo. Além disso, ela é fascinada por web design, experiência do usuário e SEO.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Recomendamos apenas produtos que acreditamos que agregarão valor aos nossos leitores.