Shadow only to right

Question

Following is the jsfiddle in which I am trying to drop shadow with blur effect only to the right but the shadow is spreading to every side. Please kindly let me know how to modify this fiddle to drop shadow only to rigt thanks,

http://jsfiddle.net/6UFX7/8193/

.myDiv {
     margin: 10px;
     width: 100px;
     height: 100px;
     -webkit-box-shadow: 2px 0px 5px 0px #888 ;
 }

possible duplicate of [Box-shadow only on one side](http://stackoverflow.com/questions/5115427/box-shadow-only-on-one-side) - solution is remarkably similar to your fiddle. — Tanner, Jul 17 '13 at 08:26
@Tanner I checked that question but the solution was not displaying shadow only to one side — user2304394, Jul 17 '13 at 08:33
this jsfiddle from the solution has a right shadow only: http://jsfiddle.net/Kyle_Sevenoaks/6UFX7/1/ — Tanner, Jul 17 '13 at 10:24

score 4 · Accepted Answer · answered Jul 17 '13 at 08:21

Try this:

Demo.

CSS:

.myDiv
{
  margin: 10px;
    width: 100px;
    height: 100px;
    -webkit-box-shadow: 5px 0px 5px -2px #888 ; /*Chrome*/
    -moz-box-shadow: 5px 0px 5px -2px #888 ; /*Firefox*/
    -o-box-shadow: 5px 0px 5px -2px #888 ;  /*Opera*/
    box-shadow: 5px 0px 5px -2px #888 ;
}

Use the shadow-spread property(fourth) to make the user think that the shadow is only on one side and yes also increase the amount of the horizontal offset property(first) to make the trick work.

score 1 · Answer 2 · answered Jul 17 '13 at 08:22

1

.myDiv
{
  margin: 10px;
  width: 100px;
  height: 100px;
  box-shadow: 20px 0px 5px -2px #888 ;
  -webkit-box-shadow: 20px 0px 5px -2px #888 ;
}

20px position R/L 0px position T/B 5px spread(blur) -2px "size"

answered Jul 17 '13 at 08:22

Žarko Selak

1,073
12
19

Shadow only to right

2 Answers2