Is there a way to create a box shadow only on 1 side ?
In webflow… if you create a shadow @ 270 degrees…
it creates the left-side shadow… but also creates the top and bottom shadow.
I only want the left shadow.
Any way to accomplish this ?
Try to move the shadow like crazy to that one side. 
not sure what you mean
I forgot how it’s called but if you play atound with the shadow you will find out you can move it more to one side.
1 Like
If you are looking to have the shadow cut off sharply at the top and bottom but taper off to the left, you could put the element that you want shadowed inside a DIV that has extra space on that left side, and set that element’s overflow to hidden.
Otherwise, work with negative values for the shadow size.
1 Like
Well look at that. Even an old dog can learn new tricks.
I went the div no overflow → div shadow route… I thought it was perfect.
but then I noticed something odd…
There seemed to be a gap between 2 different outer divs.
The outer div has border / margin = 0.
So I changed the background color to black and zoomed in…
and this is what I saw:
The inner div has 2 shadows…
90 deg distance 4 blur 10
270 deg distance 4 blur 10
What’s creating that gap ?
(above) so the shadow is the same color… but notice they “look” different
What is causing the gap is that you are applying separate shadows to each section of a larger block of items. What you’re seeing is the beginning of the corner shadow that is then being cut off. I believe to remove that gap you can just slightly increase the size of the shadow until the area where it begins to fade is beyond the edge of the div with the overflow hidden.
Or you could apply the drop shadow to the element that is holding all of these blocks. Is there a reason that isn’t an option?
I tried this - increased to size 6… in order to remove the gap - you end up with a ridiculously large shadow.
I changed the shadow color #000 to make show the gap easier.
On the left is size 6 - the right is size 0.
I think this is what you saying (at least it’s what I did).
This is what I have so far
page-wrap (no overflow)
→ outer-wrap margin: auto, width:90% and shadow
-----> main-wrap padding: 7%
-----> main-wrap padding: 7%
-----> main-wrap padding: 7%
This is almost perfect…
the only issue being
the top
and bottom
The “curve” of the shadow is much more visible when I active the header and footer.
A negative top margin should fix that issue at the top. Not sure about the bottom.
Yes…I just tried that…
-5 on the top and -10 on the bottom… fixed it.
Thanks a lot 
This topic was automatically closed after 60 days. New replies are no longer allowed.