Box Shadow Using CSS3

Box Outer Shadow

As we all know that CSS3 is rolling out in the web and mobile industry, using of CSS3 is increasing day by day which can save lot of our extra time in slicing and embedding pictures into our web pages. Because of CSS3 web pages are becoming faster in loading, mobile friendly (responsive) and more user friendly.

Today I am going to give you intro about Box Shadow one of the coolest feature of CSS3. Box Shadow property can implement multiple drop shadows including “outer shadow” & “inner shadow”. Look at following syntax:

box-shadow: 1px 2px 10px 5px rgba(0,0,0,0.5);

The first 1px is for horizontal shadow position, second 2px is for vertical shadow position, third property 10px is stands for blurriness of your shadow, fourth 5px is spread of your box shadow (it depends that how long you want your shadow to be spread out), the fifth rgba is shadow color and its opacity RGBA stands for Red, Green, Blue and Alpha (opacity of color) e.g. rgba(red,green,blue,alpha), in above example I set box-shadow color to black with 50% opacity “0.5” you can change opacity value between “0 to 1” e.g. 0.1, 0.2, 0.3, 0.4, 0.5 etc.

Box Inner Shadow

For shadow inside box you simply have to add “inset” before shadow properties for example: box-shadow: inset 1px 2px 10px 5px rgba(0,0,0,0.5);

I hope you guys have enjoyed this small tutorial, more will come soon! Please don’t forget to share your experience about Box Shadow in comments below.

Thanks for reading! 🙂


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s