Search
Close this search box.

How to Create a Drop Shadow in Brizy

Wise people say that an image is worth a thousand words. Maybe that sounds cli·ché, But we believe the image has magical power. One of the effects that can help an image be more interesting is the shadow effect. The shadow in the image is essential. But, adding a shadow effect could distract an image. So we need to be careful to play with it. Once we know how to play with the shadow, it can be a great advantage to make your image stunning. There are some types of shadow; the most popular one people commonly use is the drop shadow.

With Brizy, you can create a drop shadow very easily. This article will show you how to create a drop shadow in Brizy. Let’s get started!

How to Add a Drop Shadow on the Image

On your WordPress Dashboard, go to the Pages -> Add New. Click the Edit with Brizy button, which brings you to the Brizy editor.

Once you enter the Brizy editor, continue to add a new block by clicking the plus (+) icon. You will see the Blocks library because we want to start everything from scratch, so please select the Create your own option.

Next, click the mixer button. On the panel, go to Settings and change the block’s width. In this tutorial, we set the Width at 40%. You can customize more by editing and styling the block to your preference. Once you have finished editing and styling up the block’s setting, add an image element by clicking the plus (+) icon and dragging the Image element from the Elements panel. After that, add an image.

T

The shadows are grouped within color. So, within the options toolbar, go to the Colors and click on it. You will see the three selections in the tab. There are Overlay, Border, and Shadow. Click the Shadow tab, and you’ll start adding the shadow to the image.

On the Shadow settings, you will find several things that you can set as below:

  • Shadows color and opacity
  • Shadows direction (Right, left, up, bottom, and all four cardinal at once)
  • Shadows Spread

First, start with the shadow color. You can write the hex color code or move the cursor to pick the shadow color and set the shadow opacity as your preference. Once you have finished selecting the color and opacity, you can continue to edit the shadow directions and spreading.

As shown in the GIF above, we applied some changes to shadow settings. There are the following changes that we’ve applied as below:

  • Color: #373434
  • Opacity: 72%
  • Shadow directions:
    • Right: 6 px
    • Bottom: 6 px
    • Spreading: 14 px

That’s it. Play around with the shadow settings and make your image outstanding.

The Bottom Line

This article shows how to add a drop shadow to the image element. But. you can apply this tutorial to add a drop shadow for other elements or any purpose, such as below:

  • Columns
  • Rows
  • Blocks
  • Etc

Well, as we mentioned in the introduction above, we must be careful to play with shadow effects. We suggest you consider when you’re working with the shadows in website design, they should not be harsh (subtle).

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to turn your WordPress knowledge into revenue? OF COURSE!

Leave a Comment

Share This
Hey 👋🏻
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how 👉🏻
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.