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 cre­ate a con­tainer which only had a shadow on one edge — the top edge. Here’s a sim­ple approach to achieve it with pure css syn­tax. Check out the jsfid­dle for the css classes writ­ten 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 ingre­di­ent here is the neg­a­tive value of the ‘spread-radius’ prop­erty, neg­a­tive val­ues of which cause the shadow to shrink. This shrink­ing, in com­bi­na­tion with the off­set, gives an appear­ance that the shadow is only on one edge of the box.

The inter­est­ing thing is that box shadow allows mul­ti­ple shad­ows, sep­a­rated by a comma. You can com­bine that to have shad­ows in mul­ti­ple directions.

e.g

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

Ref­er­ences

Ryan Sukale

Ryan is a UX engineer living in San Francisco, California.

You may also like...