0

hey guys i was playing around with css box-shadow property and I'm struggling with it a little bit. Im trying to create shadow on a box but I want to apply shadow only on the top,bottom and left side of my div.

here is my css code until now but it is going to apply for all of the 4 sides which i do not want..

     box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.6);

Thanks

Mll
  • 63
  • 2
  • 8
  • There is likely no need for you to include prefixes for this property anymore. Look at the support table: http://caniuse.com/#feat=css-boxshadow (Note: you'll need to click 'Show all' to find a browser version that needs a prefix) – Zaqx Oct 26 '15 at 20:35
  • Additionally, when you do add prefixes, the unprefixed version should always come last because later property declarations override those that came before. – Zaqx Oct 26 '15 at 20:38
  • thank you for the explanation :) – Mll Oct 26 '15 at 23:48

1 Answers1

2

Try this:

-webkit-box-shadow: -8px 3px 25px 1px rgba(0,0,0,0.75);
-moz-box-shadow: -8px 3px 25px 1px rgba(0,0,0,0.75);
box-shadow: -8px 3px 25px 1px rgba(0,0,0,0.75);

Also you can play around here.

Florin Pop
  • 5,105
  • 3
  • 25
  • 58