Code by Day | Explore By Weekend

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!
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!

7
Last updated Jan 3, 2021 @ 1:14 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

Subscribe
Notify of
guest
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments

Warning: sprintf(): Too few arguments in /home/292293.cloudwaysapps.com/xgqayzdmur/public_html/wp-content/plugins/wp-user-avatar/includes/class-wp-user-avatar-functions.php on line 478
2 months ago

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

Peter
Peter
1 month ago

Thank you Nelson, you are the lifesaver!

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 5,300 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart