BlogsDope image BlogsDope

Creating Different Box Shadow Effects using CSS

May 25, 2017 HTML CSS 36475

You can add beautiful shadows to your HTML elements using box-shadow property in CSS. It has quite a good browser support and can be used to add different types of shadow effects to your elements.

You can give values to mainly five parameters of this property. Before moving to these values, have a look at the syntax.

CSS

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];

Each of these parameters are defined below.

  1. horizontal offset (required) : This is the horizontal length of the shadow. A positive horizontal offset will place the shadow on the right side of the box while a negative horizontal offset will place the shadow on the left side of the box.
  2. vertical offset (required) : This is the vertical length of the shadow above or below a box. A positive vertical offset will place the shadow on the bottom side of the box while a negative vertical offset will place the shadow on the upper side of the box.
  3. blur radius (optional) : This is the extent to which the shadow is blurred. Therefore, a higher blur radius will make the shadow more blurred and extended, thus making it bigger and lighter. On the other hand, a smaller blur radius will result in a sharper, brighter and less extended shadow.
  4. spread radius (optional) : This is used to change the size of the shadow. A positive spread radius will increase the size of the shadow, a negative value will decrease the size and a 0 value will have no change in the size of the shadow.
  5. color (optional)

Now, let's draw a shadow for a box considering the effect of each of the parameters.

HTML

<div id="block"></div>

CSS

#block{
	width: 300px;
	height: 160px;
	background-color: #D8D81B;
}

This will draw a div with 300px width and 160px height with a background color.

horizontal offset

If you want the shadow only on the right or left side of the box, then give vertical offset 0.

A positive value will place the shadow on the right side of the box.

CSS

#block{
	box-shadow: 4px 0;
}

A negative value will place it on the left side of the box.

CSS

#block{
	box-shadow: -4px 0;
}

vertical offset

Same as horizontal offset, give 0 horizontal offset if you want the shadow to be only at the top or bottom of the box

Give a positive vertical offset for a bottom shadow.

CSS

#block{
	box-shadow: 0 4px;
}

Similarly, a negative vertical offset will give a shadow at the top edge.

CSS

#block{
	box-shadow: 0 -4px;
}

If you want a bottom-right shadow, then give both the horizontal offset and the vertical offset 0.

CSS

#block{
	box-shadow: 4px 4px;
}

blur radius

Making a shadow blurred gives it a natural look. If you want to give a blurred effect to the shadow, then give some positive blur radius to the shadow.

CSS

#block{
	box-shadow: 4px 4px 7px;
}

spread radius

Now, increase the size of the shadow without much changing the blurred effect by giving a positive spread radius.

CSS

#block{
	box-shadow: 4px 4px 7px 2px;
}

color

You can give a color to the shadow by giving any color name or color value (like rgba or hsla). It gives a nice and a more natural look to the shadow if the opacity is set to a value less than 1 (as in the following case, where the opacity is set to 0.4).

CSS

#block{
	box-shadow: 4px 4px 7px 2px rgba(0,0,0,0.4);
}

Giving shadow to three sides

If you want to set shadows on three of the sides of a box, then you just need to give shadows to the three sides separately, separated by commas.

In the following example, shadows are given to the right, bottom and left sides of the box respectively.

CSS

#block{
	box-shadow: 7px 0px 5px -3px rgba(47,47,47,0.5), 0px 8px 7px -3px rgba(47,47,47,0.5), -7px 0px 5px -3px rgba(47,47,47,0.5);
}

Note that I gave a negative spread radius here. This is because due to the blur radius, some of the blurred effect of the shadow was also visible at the top edge of the box. You can adjust the horizontal and vertical offsets, blur radius and spread radius accordingly.

In the above example, there is no shadow on the bottom-left and bottom-right corners of the box. This problem can be solved by giving shadows to the bottom-right and bottom-left sides in place of right and left sides respectively.

CSS

#block{
	box-shadow: 7px 5px 5px -3px rgba(92,92,92,0.4), 0px 5px 10px rgba(92,92,92,0.6), -7px 5px 5px -3px rgba(92,92,92,0.4);
}

Giving shadow to all four sides

To give shadow effect to all the four sides of your box, you can either give box-shadow to all the four sides of your box including the corners as we did in the previous example, or you can set the horizontal and vertical offsets 0 and adjust the blur and spread radius. I always prefer the latter since it gives better finishing.

CSS

#block{
	box-shadow: 0 0 15px -2px #444444;
}

Inner shadow

You can also create inner or inset shadows which are inside the border instead of outside. This can be done by just using the inset keyword without changing the rest of the parameters of the box-shadow property.

CSS

#block{
	box-shadow: inset 0 0 15px -2px #444444;
}

This created an inset shadow giving a depressed impression to the box. You can also add inset shadows to one, two or three edges of the box in the same way by changing the values of the parameters as we did in the above examples.

Browser Compatibility

box-shadow property has a very good browser support. Still, prefixes like -webkitand -moz are added to ensure compatibilty for all browser versions. So, it is good to add the prefixed code also for better browser support.

#block{
	-webkit-box-shadow: 0 0 15px -2px #444444;  /* Safari , iOS 5- */
	-moz-box-shadow: 0 0 15px -2px #444444;     /* Firefox 3.5 */
	box-shadow: 0 0 15px -2px #444444;          /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

Conclusion

box-shadow is a widely used property in CSS for adding shadows in a quick and easy way and due to great support from browsers. You can experiment and add different shadow effects on your elements.

In this article, I stated the different ways in which we can add shadows to HTML elements. You can also check the wide applications and beautiful effects which can be produced by this property from the following links.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).