How To Match Divi’s Box Shadows with CSS tutorial by Pee-Aye Creative

How To Match Divi Box Shadows with CSS

In this tutorial, I'm going to show you how to match the Divi box shadows with CSS so you can use the same style anywhere on your website!
Categories: Divi CSS Tutorials
how to add Divi box shadows on columns

This is an example of the default Divi box shadow 1.

Divi box shadows
box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3);

This is an example of the default Divi box shadow 2.

Divi box shadows
box-shadow: 6px 6px 18px 0px rgba(0,0,0,0.3)

This is an example of the default Divi box shadow 3.

Divi box shadows
box-shadow: 0px 12px 18px -6px rgba(0,0,0,0.3)

This is an example of the default Divi box shadow 4.

Divi box shadows
  box-shadow: 10px 10px 0px 0px rgba(0,0,0,0.3);

This is an example of the default Divi box shadow 5.

Divi box shadows
box-shadow: 0px 6px 0px 10px rgba(0,0,0,0.3);

This is an example of the default Divi box shadow 6.

Divi box shadows
  box-shadow: inset 0px 0px 18px 0px rgba(0,0,0,0.3);

This is an example of the default Divi box shadow 7.

Divi box shadows
box-shadow: inset 10px 10px 0px 0px rgba(0,0,0,0.3);

Does this all make sense? I hope it helps you understand which part of the box shadow code is changing which part, and that you can use this on many projects to come! If you like this type of tutorial, subscribe below and that’s what you will get!

Last updated Jan 3, 2021 @ 1:14 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

6 Comments

  1. Britt Phillips

    This is great timing! I was using other CSS that stopped working.

    Reply
  2. Peter

    Thank you Nelson, you are the lifesaver!

    Reply
  3. Matt

    Thank you so much for posting this! I’m working on a project that mixes standard Divi modules with custom code modules… so my styling wasn’t exactly the same as the Divi defaults. But after finding this article, now all my box shadows match the Divi default! Wahoo!

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart