How To Create Awesome CSS Box Shadow Effects

CSS box shadow effects is very simple. But color combination is very necessary for create a awesome css box shadow effects . For example if you use black after that blue and after that green, it may not be a professional box-shadow. For learn about color code you can follow the html color code article. This is very necessary for you to play with css box shadow effects of CSS. Here I have explain details about how to create css box shadow effects in this post.


css box shadow effects

css box shadow effects

At first create a simple html file for work with this. You can create a html file as you want. Look at the following html code, I have create this for me.





<p>This is a very simple and short html file for you</p>



Now ,it’s time for see the source code of CSS for create css box shadow effects . Look at the following CSS code;

p {

display: inline;

position: relative;


color: rgba(0,0,255,0.5);


p {

background: #EEE;

box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 10px 0 -4px #EEE, 0 10px 2px -5px rgba(0,0,0,0.15), 0 20px 0 -11px #EEE, 0 20px 1px -8px rgba(0,0,0,0.15);


0 20px 1px -8px rgba(0,0,0,0.15) code refers a new box. You have to select the position and select the color for the box.

Now, save this as .html mode into your pc and than open it via your browser. As you know about CSS you can edit this and  create css box shadow effects as you want.

Roy Jemee is a professional Blogger. Apart of blogging he likes to play with mathematics. He knows Blogging, Wordpress, PHP, javascript , SEO and some other.