Overview

How to add Shadow to Gutenberg blocks in WordPress. This article will outline the steps that you can use to apply a shadow to any block-level elements created using Gutenberg editor in WordPress.

Prerequisites

Applies only to sites hosted on WordPress.com

These steps need Custom CSS Options enabled which is a feature of WordPress.Com Premium and Business Plans. If you haven’t already brought the WordPress.Com Premium and Business Plan, you should consider one to gain more flexibility with your WordPress.com Site/Blog.

Good to have Knowledge

You should know a little bit of CSS or at least possess some basic understanding of the CSS to achieve this. Do not panic if you are unaware of what is CSS and how it works. We will share all the needed steps through this article to make it easy for you. If you follow the steps as directed, you should be good to go.

If you follow the steps as directed, you should be good to go.

Solution

To apply a shadow to Gutenberg blocks in WordPress, you will need to implement a custom class to the block where you want to add a shadow.

How to add a custom CSS Class to Gutenberg Blocks?

Let us apply a custom CSS class drop-shadow to Gutenberg block element below this para/block. We will then discuss the CSS code we are using to drop shadow behind WordPress Gutenberg block.

This block is carrying a custom class drop-shadow and will have a drop shadow effect applied to it. It will also have some additional styling applied to make it look a bit more appealing. The complete code used to get this effect will be available and discussed below this block element.

p.drop-shadow {
    box-shadow: 2px 2px 50px 10px #d8d8d8;
    padding: 15px;
    margin: 25px;
    background: #00aadc;
    color: white;
}

Code Block Explained

Now let discuss the code and help you understand what is happening here. We have called in the element using the class drop-shadow. The class name should always begin with Dot (.). The P prefixed is to notify the processor that only the element of paragraph type under the drop-shadow class should take this effect/styling. The code for that particular class should always be enclosed between flower brackets { — Code Here — }.

Under the enclosed area of that class, we are calling different CSS properties to apply the desired effect. Since we are planning to drop shadow, we will call Box-Shadow property of CSS. Let us discuss the Box Shadow property and the different values we have used.

CSS Box-Shadow on Gutenberg block element

With the help of CSS Box-Shadow property, you will be able to drop or apply a shadow effect to almost any element on your site. In this code, we are using five values separated with space. See the image below the code line for more understanding.

box-shadow: 2px 2px 50px 10px #d8d8d8;

Now let us discuss the Padding and Margin property. Using CSS Padding property, you will be able to create space around the text within the box holding the text. Each Text element whether heading or paragraph is contained inside a box. When you apply padding to that element, space is added inside the box, and the text is pushed away from the box border towards the inner area.

The padding normally takes up to 4 values where each of them defines the padding amount in the respective sides of the box area. It starts from Top and goes in a clockwise order. Top -> Right -> Bottom -> Left. If only one value is used, the same will be applied on all 4 sides. However, if two values are used, the first set will apply to Top & Bottom and the second set will apply to the Right & Left area of the box.

The margin follows the same style approach i.e., starts from the top and goes in clockwise order just like the padding property. However, the CSS Margin property creates space outside the box holding the text or element. See the image below for reference.

The CSS Background property allows you to set the background color or image for that element and CSS Color Property will help you to control the color of the text inside that element.

We hope you find this article useful. In case you are stuck and or need help, feel free to drop a comment or submit your question. Do share it further and add your feedback about the article in the comments section.