Creating a CSS3 box-shadow on all sides but one

The anatomy of box-shadow

Playing with negative spread

You could utilize a negative spread radius to contract the shadow towards the box hence removing the shadow from a specific side:

.negative-spread {
  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .5);
  /* Ah, 50 Shades Darker, right? */
}


Shadows that respect personal space

Via :before or :after pseudo-elements, you can add shadows without messing up your layout. Style up your shadow without touching the element's content:

.shadow::after {
  content: '';
  position: absolute;
  ...
  box-shadow: ...;
  /* This shadow respects your personal space. As it should! */
}


Juggling shadows with tabs

With tabs, we can apply the box-shadow to each tab individually, and make the active tab shadow-less by using overflow: hidden on the tab container:

.tab-container {
  overflow: hidden;
  /* The hiding spot for the tab shadows shenanigans */
}
.tab {
  display: inline-block;
  position: relative;
  box-shadow: ...;
  /* Keeping up with the Shadowbans */
}
.active-tab {
  box-shadow: none;
  /* The 'hide and seek' champion */
}


Leveling up your shadow game

Crafting shadows with clip-path

The clip-path property allows you to shape your shadow specifically. Use inset() without commas for precision, but remember to check the browser's compatibility:

.clipped-shadow {
  clip-path: inset(10px 0 0 0);
  /* This isn't your regular barbershop clipper */
}


Shadow positioning with pseudo-elements

Through absolute positioning of pseudo-elements, you can influence a very specific shadow effect. Customize their size to control the area of the desired shadow:

.shadow::before {
  content: '';
  position: absolute;
  ...
  /* Like a tailor for your shadow */
}


Outsmarting dynamic interactions

Hovering on the edge of shadow

Incorporate dynamic shadows for interactive elements. Add shadow to an element upon interaction with the :hover selector:

.tab-link:hover {
  box-shadow: ...;
}
/* Because elements also deserve the spotlight when they're hovered */


Avoiding content overlapping

Prevent the shadow from overlapping active content. Adjust the height of your content area as needed:

.content-area {
  height: ...;
  /* Elevating the content like a gentleman. How chivalrous! */
}


Misplace a shadow? Use margins, paddings

To fine-tune your shadow placements utilize margin and padding properties. Especially handy when styling navigation bars or tabbed interfaces:

.nav-item {
  margin: ...;
  padding: ...;
}
/* Shadows are like cookies. They are best when they’re in the right jar */
