Box-Shadow on the left side of the element only

Question

I have been having trouble setting a box shadow on the left side of an element only   I tried this   box-shadow  -10px 0px 3px 0px  aaa    However  the box shadow looks more like a grey line and lacks the regular shadow-effect that I am used to when using box-shadow  Also  the above example includes a small top box-shadow that I am trying to get rid of   Thank you

User · Answer

box-shadow  -15px 0px 17px -7px rgba 0 0 0 0 75   The first px value is the  quot Horizontal Length quot  set to -15px to position the shadow towards the left  the next px value is set to 0 so the shadow top and bottom is centred to minimise the top and bottom shadow  The third value 17px  is known as the blur radius  The higher the number  the more blurred the shadow will be  And then last px value -7px is The spread radius  a positive value increases the size of the shadow  a negative value decreases the size of the shadow  at -7px it keeps the shadow from appearing above and below the item  reference  CSS Box Shadow Property

User · Answer

box-shadow  inset 10px 0 0 0 red

User · Answer

You probably need more blur and a little less spread   box-shadow  -10px 0px 10px 1px  aaaaaa    Try messing around with the box shadow generator here http   css3generator com  until you get your desired effect

User · Answer

This question is very  very  very old  but as a trick in the future  I recommend something like this    element      box-shadow  0px 0px 10px  232931     container      height  100px      width  100px      overflow  hidden      Basically  you have a box shadow and then wrapping the element in a div with its overflow set to hidden  You ll need to adjust the height  width  and even padding of the div to only show the left box shadow  but it works  See here for an example If you look at the example  you can see how there s no other shadows  but only a black left shadow   Edit  this is a retake of the same screen shot  in case some one thinks that I just cropped out the right  You can find it here

[css] Box-Shadow on the left side of the element only

Examples related to css