Shadow or Shadow with CSS3

Friends of Wakaka Design, this time we will discuss about CSS Shadow, if you remember a few years ago, when you want to create a shadow effect on a website, then we have to make it in Photoshop using the Drop Shadow Effect, then we crop/slicing as needed. Wow, trouble huh? what’s more, the result is in the form of an image file, which can burden the website, can increase the burden on the website because it has to load the image first for a shadow.

Now those days are said to be over, though not completely over.
Shadow on the website we can create by adding a few lines of CSS3 only.

The working principle of CSS Shadow is as follows:
box-shadow: none | <shadow> [ , <shadow> ]*

<shadow> = insert? && [ <length>{2,4} && <color>? ]
We can see that the shadows are separated by commas (,) and each comma is used to give a vertical or horizontal shadow. and width thickness/BLUR.

Examples like the following:

This is an example of Shadow in CSS
The syntax is something like this: