How to make amazing css shadow effect

css-shadow

Pages on websites are device responsive. Rise of CSS3 and it’s extensive properties are able to transform our webpage more appealing and acceptable.

CSS shadow is one of the useful property that specifically present your content focused to end users. Accessing from different devices; you might notice that everything’s prepared for any screen. No matter how rough is the content or how huge amount of contents.
After appearance of CSS3 it becomes one step endurable to apply shadow on regular elements. We can now apply CSS shadow on text and HTML elements.
Why again? well, I myself; have seen uncountable users who still got blurry idea about many common but necessary standard syntax whether HTML or CSS or bunch of things to be pronounced. Well, let me start with the css shadow.
CSS shadow basically applies on text & standard HTML elements such as

There are two css shadow properties:

  • box-shadow
  • text-shadow

So if you define box-shadow on a div and expect to get shadow on text, surely it won’t style your texts. Because you got another property called text-shadow. Ultimately box-shadow will style the div block.

css shadow structure

image showing the basic structure of css box-shadow

Better not to assume, Take a look on both properties of css shadow. Create a div with some width and define css shadow as below:

The browser recognize the box-shadow property. It’s going to create-

box-shadow

4px horizontal (h-offset) at x-axis.
3px vertical (v-offset) at y-axis.
2px blur radius for the shadow.
1px spread of how far the shadow will stretch.
grey color of the box shadow.
Note: both blur & spread properties are optional. It can be omitted if you need.

css shadow

box-shaodw applies outer side

There’s another option for box-shadow. That’s the inset value. Which allows you to create inside shadow. Check bellow example.

css shadow

inset applies inner side of the element


text-shadow

1px horizontal (h-offset) at x-axis.
1px vertical (v-offset) at y-axis.
2px blur radius.
black color for the text shadow.
Note: text-shadow doesn’t require spread value.

Feel free to check css shadow on your projects. Definitely you’ll end up with some interesting css shadow designs. Don’t hesitate to post screenshots or snipets.

Post A Reply