DEV Community

Buari Bola Ahmed
Buari Bola Ahmed

Posted on

Learning CSS-Box Shadow

CSS-Box Shadow

What did I want to learn and why

Am writing about the CSS shadow box I learnt about few days ago.
I got across this property while learning about CSS on freecodecamp.com before and had to implement it on a project I did both individually and with my coding partner at Microverse.

I was trying hard to understand what it does and how the values work. Like most other CSS property, the value was not consistent (varying number of value).

The values for the property can range from just one to six values and more if it is nested (shadow on another shadow)

Below are examples of the property value varying size which hard different effect:

.shadowone {
  box-shadow: 10px 10px;
}
.shadowtwo {
  box-shadow: 10px 10px 5px;
}

.shadowthree {
  box-shadow: 10px 10px 5px 5px;
}
.shadowfour {
  box-shadow: 10px 10px grey;
}

Alt CSS Box-shadow example 1: Image with four different types of CSS box-shadow property values (associated code is above).

What I learned and built

The pattern I observed about the CSS box-shadow property is as follows:

  • When only one value is given, it is usually one of these global keywords
.shadow {
  box-shadow: initial;
}
.shadow {
  box-shadow: none;
}
.shadow {
  box-shadow: unset;
}
.shadowfive {
  box-shadow: 10px 10px 5px;
}
.inherit {
  box-shadow: inherit;
}

Alt CSS Box-shadow example of when a single global value is provided in this case 'inherit' (associated code is above).

  • {box-shadow: inherit;} This value Inherits the box-shadow property from its parent element.
  • {box-shadow: initial;}, {box-shadow: none;} and {box-shadow: unset;} sets the property to its default value.

When two, three or four length values are given, the first two will represent the horizontal-offset and vertical-offset and the next two will represent the blur-radius and spread-radius. The other two values are optional, which are the inset keyword and color value. To specify multiple shadows, a comma-separated list of shadows can be provided to achieve this.

{box-shadow: horizontal-offset vertical-offset}
horizontal-offset - which is a length value for setting a horizontal distance from the element box.

.shadowsix {
  box-shadow: 10px 0px;
}

Alt CSS Box-shadow example on horizontal-offset with positive value (associated code is above).

A negative value will set the shadow to the left of the element while the positive will set the shadow to the right of the element.

.shadowseven {
  box-shadow: -10px 0px;
}

Alt CSS Box-shadow example on horizontal-offset with negative value (associated code is above).

vertical-offset - which is also a length value for setting a vertical distance from the element box.

.shadoweight {
  box-shadow: 0px 10px;
}

Alt CSS Box-shadow example on vertical-offset with positive value (associated code is above).

A negative value will set the shadow above the element while the positive will set the shadow below the element.

.shadownine {
  box-shadow: 0px -10px;
}

Alt CSS Box-shadow example on vertical-offset with negative value (associated code is above).

blur-radius - the third value in the diagram below is the blur-radius

.shadowten {
  box-shadow: 0px 0px 24px;
}

Alt CSS Box-shadow example  (associated code is above).

This shows that even if both offsets (first two values) values are zero the shadow is behind the element and still generates blur effects. This is also the same for spread-radius.

.shadoweleven {
  box-shadow: -10px -10px 24px;
}
.shadowtwelve {
  box-shadow: -10px -10px 48px;
}

Alt CSS Box-shadow example of the spread-radius value showing the difference between a small and larger value (associated code is above).

The larger this value, the bigger the blur, so the shadow becomes bigger and lighter (or more blur) as shown above.

Negative values are not allowed for this value. This results in an error and invalidates the box-shadow property

spread-radius - This is the fourth length value.

.shadowfourteen {
  box-shadow: 0px 0px 0px 16px;
}

Alt CSS Box-shadow example of the spread radius value  (associated code is above).

Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink as seen below.

.shadowfifteen {
  box-shadow: 10px 10px 5px 5px;
}
.shadowsixteen {
  box-shadow: 10px 10px 5px -5px;
}

Alt CSS Box-shadow example showing two different values of the spread radius property, one positive and the other is negative (associated code is above).

If not specified as we have been seeing earlier it will be 0 and the shadow will be the same size as the element.

inset The inset keyword changes the shadow from being drop shadow to one inside the element box, above the background but below the content with respect to the length values as shown below:

.shadowseventeen {
  box-shadow: 10px 10px 5px -5px inset;
}

Alt CSS Box-shadow example of the inset keyword value  (associated code is above).

color
If the color is not specified as we have been seeing in earlier examples, the color used will depend on the browser - it is usually the value of the color property which is the default in the above examples.

.shadoweighteen {
  color: blue;
  box-shadow: 10px 10px 5px -5px;
}

Alt CSS Box-shadow example our the color value of an element influence the shadow color (associated code is above).

Here the color property is set to blue and hence have the box-shadow color as blue as it is not specified, but when the color is specified as shown below, the box-shadow color changes to that value.

.shadownineteen {
  color: blue;
  box-shadow: 10px 10px 5px -5px green;
}

Alt CSS Box-shadow example  (associated code is above).

Common application of CSS box-shadow property

CSS box-shadow is used mostly for navigation bars and button. Examples of projects I applied box-shadow to is below:

  1. New York Times Clone - Navigation bar - View in browser - View on Github

  2. Mint.com’s signup page clone - Button - View in browser - View on Github

  3. Footer link Hover effects - View in browser - View on Github

Here are some resources if you want to learn more...

  1. CSS Tricks
  2. W3Schools
  3. MDN web docs

Top comments (0)