Want to make your page boxes stand out and grab attention? A stunning box shadow can do just that! In this guide, I’ll show you how to create a unique, personalized box with an eye-catching shadow effect that will take your design to the next level.

For this example, I’ll be using the button block to walk you through the box shadow customization process.

aBlocks Box Shadow Customization

First, select a block where you want to add the box shadow effect. In this guide, I’ll be using the button block as an example.

To start customizing the box shadow, go to Block > Advanced and scroll down until you find the Shadow section. Click on Shadow, and you’ll see the box shadow settings.

Now, click Add, and a new popup will appear where you can adjust all the box shadow settings to your liking.

Here’s a breakdown of the customization options available:

Shadow Type

The first setting is Shadow Type, where you can choose between two options:

Outer Shadow: This applies the shadow to the outside of the box.

Inner Shadow: This places the shadow inside the box.

You’ll be able to see how each shadow type looks in the preview boxes below the options. Just click on any of them to apply the style. 

Color

Next, you can change the shadow color. You can either select a color from the palette or enter a specific color code to get the exact shade you want.

Horizontal 

The Horizontal slider allows you to adjust the shadow’s position left or right. Drag it to the left to move the shadow left, or to the right to move it right. You can also input a specific value for more precision.

Vertical

In the Vertical section, you can adjust the shadow’s position up or down. Dragging the slider left shifts the shadow upward while dragging it right moves it downward. Again, you can input an exact value if you prefer.

Blur

The Blur setting controls how sharp or soft the shadow looks. Sliding it left makes the shadow more solid, while moving it right increases the blur, softening the shadow’s edges. You can also enter a specific number for fine-tuning.

Spread

The Spread option adjusts how far the shadow spreads. Move the slider left to decrease the shadow’s spread, making it smaller and more focused. Sliding it right increases the spread, making the shadow cover a larger area. As always, you can input an exact value if needed.

That’s everything you need to know to customize your box shadows in aBlocks! With these options, you can create shadows that perfectly fit your design style.