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.


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


Ryan Sukale

Ryan Sukale

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

You may also like...

Leave a Reply

Your email address will not be published.