DEV Community

Cover image for Apply CSS Box Shadow the right way + FREE Resources
David Asaolu
David Asaolu

Posted on โ€ข Edited on

15 4

Apply CSS Box Shadow the right way + FREE Resources

Hello my wonderful friend, welcome to this tutorial!
Today, I'll be explaining CSS Box Shadow and I will also be sharing different cool resources that will help you add box shadow to elements on your website in no time!

Stick with me till the end! ๐Ÿป

CSS Box Shadow Tutorial

What exactly is Box Shadow?

Box-shadow is a CSS property that adds shadow effects around an element's frame, and you can set multiple effects separated by commas.

Here is the syntax:

box-shadow: [optional inset] [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
Enter fullscreen mode Exit fullscreen mode

Box Shadow takes all other measurement types except for percentages %

What exactly do each of these box shadow effects mean?

1. Inset:

This is an optional keyword. The presence of the inset keyword changes the shadow direction to be inside the frame, instead of its default outward appearance.

CSS Box Shadow - Inset Box Shadow Example

2. Horizontal Offset:

This represents the shadow on the right of the element. When it is positive, it means the shadow will be on the right of the box, while a negative value will put the shadow on the left of the box. It is compulsory.

The image below shows the effect of the horizontal offset (30px) and the inset property.
Notice that the inset property changes the direction of the box-shadow just like the negative horizontal offset.

CSS Box Shadow - Horizontal Offset

3. Vertical Offset:

This represents the shadow at the bottom of the element. When it is positive, it means the shadow will be at the bottom, while a negative value will put the shadow on top of the box. It is also a compulsory value.

Here is an another example similar to Horizontal offset

CSS Box Shadow - Vertical Offset

4. Blur Radius:

This adds some opacity to the color of the shadow. The default value is zero. If set to 0 or not specified, the shadow will be sharp. The higher the number or value, the more blurred it will be. It is optional.

CSS Box Shadow - Blur Radius

5. Spread Radius:

This determines the size of the shadow. The larger the value, the larger the shadow. Also, where its length ends is where the blur begins. Positive values increase the size of the shadow, negative values decrease the size. Its default value is 0 (same size as blur radius).

CSS Box Shadow - Spread Radius

Let's check out some use cases of CSS Box Shadow

Interesting Box Shadow Examples on Codepen ๐Ÿš€

๐Ÿ’ฏ FREE Resources to get Up & Running with CSS Box Shadow ๐Ÿš€

  1. Neumorphism
  2. Box Shadow Art
  3. Box Shadow CSS Generator
  4. Box Shadow

Thank you for reading till the end.

Feel free to follow for more interesting and educative posts and also Connect with me on
๐Ÿš€ Linkedin
๐Ÿš€ Twitter

CSS Box Shadow Giphy

Image of Timescale

๐Ÿš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsโ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (14)

Collapse
 
awps profile image
Andrei Surdu โ€ข

Excelent article.
I found some interesting designs.
Recently I realeased a box-shadow tool, which allows to save creations online, and I'll add some of them there.
BTW, you can chexk it out if interested. box-shadow.art

Collapse
 
arshadayvid profile image
David Asaolu โ€ข

Wow! This is a very great tool Andrew.
Really worthy to be added to the list of resources.

Collapse
 
rriegel profile image
Ryan Riegel โ€ข

Really helpful, just incorporated the transition property to a box-shadow attribute in one of my personal projects. So nice looking ๐Ÿ˜Ž
Thanks for putting this together and including CodePen examples!

Collapse
 
arshadayvid profile image
David Asaolu โ€ข

Glad you found them useful Ryan. The pleasure is mine.

Collapse
 
vishal2369 profile image
Vishal2369 โ€ข

Great article

Collapse
 
arshadayvid profile image
David Asaolu โ€ข

Thank you very much Vishal

Collapse
 
cesscode profile image
Cess โ€ข

Great article chief

Collapse
 
arshadayvid profile image
David Asaolu โ€ข

Thank you Cess!

Collapse
 
drsimplegraffiti profile image
Abayomi Ogunnusi โ€ข

Very informative

Collapse
 
arshadayvid profile image
David Asaolu โ€ข

Glad! You found it informative ๐Ÿ’ช

Collapse
 
krehator21 profile image
Marcos F. โ€ข

Thank you! Great source of inspiration

Collapse
 
arshadayvid profile image
David Asaolu โ€ข

Glad, you found it useful Marcos

Collapse
 
jotajeff profile image
Jeferson Silva โ€ข

great job. Thank you for share.

Collapse
 
arshadayvid profile image
David Asaolu โ€ข

You're welcome Jeferson

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs