Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

How to set a box shadow on left or right only or just on a single slide

Recently I wanted to create a container which only had a shadow on one edge – the top edge. Here’s a simple approach to achieve it with pure css syntax. Check out the jsfiddle for the css classes written in the handy scss syntax.

TLDR, Here’s a JSFIDDLE with the SCSS classes.

.shadow-top {
  /* offset-x | offset-y | blur-radius | spread-radius | color */
  box-shadow: 0 -5px 5px -5px black;
}

The key ingredient here is the negative value of the ‘spread-radius’ property, negative values of which cause the shadow to shrink. This shrinking, in combination with the offset, gives an appearance that the shadow is only on one edge of the box.

The interesting thing is that box shadow allows multiple shadows, separated by a comma. You can combine that to have shadows in multiple directions.

e.g

box-shadow: 0px 5px 5px -5px black, 0px -5px 5px -5px black;

References

Ryan Sukale

Ryan is just a regular guy next door trying to manage his life and finances.

You may also like...