Creating a Natural Shadow effect with Pure CSS

With CSS box-shadow property, we can create a shadow effect to our HTML elements. The sample below shows a code snippet for creating a natural like shadow effect for a div. By using these CSS style, adding a class shadow will apply the created shadows to it.

Preview of a container with Natural Shadows

Using a Shadow with div

Using the same Shadow with another div

View the CSS shadow Code snippet on GitHub Gist to download directly

Ishan

Ishan Madhusanka is a dynamic developer, with a great enthusiasm in Web and Mobile Development. Eventhough he is a developer, he has this awesome creativity at its apex which helps him to polish up the UI/UX aspect of his products