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.
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).