Agency mobile menu
CONTACT
Back to Articles
Web design
Updated: May 29, 2021
By: Ironpaper

How to use CSS drop shadows for web designers

CSS box shadow is used in casting shadows off block-level elements like <DIVS>. Both CSS rounded corners and CSS drop shadows can make website updates and maintenance  a breeze compared to cutting out images and using background elements.

Hello this is a box shadow

The structure of the above element is:

-moz-box-shadow: 3px 3px 5px 6px #ccc;

-webkit-box-shadow: 3px 3px 5px 6px #ccc;

box-shadow: 3px 3px 5px 6px #ccc;

The structure consists of:

  • horizontal offset: a positive number indicates that shadow will fall on the right of the box
  • vertical offset: a positive number indicates that the shadow will be below the box
  • blur radius: This optional attribute indicates how blurred the shadow will be
  • spread radius: Increase the size of your CSS shadow with a positive number for this attribute
  • Color: You can dictate the color of your shadow as well

Related Articles

b2b marketing
The B2B Market Trends Pushing Companies to Rethink Buyer Engagement
b2b sales
Why 92% of B2B Messaging Fails to Drive Results
lead generation
B2B Lead Generation in 2026: Trust, Timing, Clarity
content marketing
Generative AI is Transforming the Buyer Journey in 2025
website
B2B Website Strategies for Performance in 2025
b2b
B2B Brand Differentiation: Stand Out When Everyone Sounds the Same
abm
When to Employ Deal-Based ABM
Interested in working for or partnering with Ironpaper? We’d love to hear from you.
We are passionate about helping remarkable companies grow. We solve challenges that hold businesses back. We love it. 
Connect with Us

Related Pages

Marketing Content Strategy ABM Strategy Lead Generation B2B Websites