Using BoxShadows effectively in Elementor

CSS’s BoxShadow is awesome. It allows us to easily cast shadows from objects and boxes, creating a three-dimensional effect. Google uses this effect extensively to convey a feeling of elevation as part of their material design.

Setting a box-shadow in Elementor

Elementor does allow us to set box-shadows right out the box (no pun intended). You can find this option in the “Border”-Submenu:

Depending on the type of Element you are trying to set your box-shadow on, the “Border”-Dialogue might be in the “Style” or “Advanced”-Tab.

You can now use the slider bars to adjust your shadow color, offset, blur and spread to your needs. Also, you can switch between an inset and an outset shadow. Unlike an outset shadow, which is cast outwards from the box, an inset shadow will be cast inside your box.

However, there is a problem. If we are using many box shadows on different pages (as we would with material design), its impossible to reuse the same box shadow on different elements. This is bad as we want our box shadows to look the same – without having to manually set parameters every time.

Use a CSS Class for your box-shadow

When following a design such as material design, we are using box shadows on lots of elements. To make this easy, we can use CSS-Classes that contain our box-shadow properties. We can then simply set the class on the element.

To make our shadow, we can use a box-shadow generator, but understanding the basic syntax of the box-shadow property is still a good idea.

The only CSS property used for shadows is box-shadow. You simply supply all the arguments in shorthand form as follows:

box-shadow: h-offset v-offset blur spread color inset|initial|inherit;

For best browser support, we additionally supply a -moz-box-shadow and -webkit-box-shadow.

Now, using the box-shadow generator linked above, I made a simple box shadow which I will put in a class.

.boxshadow1 {
     -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
     -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
     box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

In Elementor, all you need to do now is to set the class “boxshadow1” on the element. Note that while it might not display correctly inside Elementor, if you check the actual page it will work. If you are using a class, make sure you haven’t set a box-shadow in Elementor.

By the way, your box-shadow can also be animated with transition.

Free Material Design Box Shadow Presets to show elevation

As mentioned in this article, box shadows are an essential tool used in material design. They greatly improve the UX by reflecting spatial relationships. For example, the highest elevation will always receive the most attention from the user.

So if I want to display a temporary dialogue, I can use a box shadow to elevate it from other surfaces. This focuses the attention from the user, and makes it clear that a “new window” has opened which should be interacted with.

For this purpose, its a great idea to use a number of simple CSS classes that give you a shadow for different elevations. Here are some free box-shadows that you can use:

.shadow-hover {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.shadow-hover:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.shadow-level1 {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.shadow-level2 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.shadow-level3 {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.shadow-level4 {
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

For questions and comments, feel free to use the comment section below.