Clipping box-shadows

In this example below you will see how to do a Clipping box-shadows with some HTML / CSS and Javascript

This awesome code was written by chrismbarr, you can see more from this user in the personal repository.
You can find the original code on
Copyright chrismbarr ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Clipping box-shadows</title>
      <link rel="stylesheet" href="css/style.css">



  <div class="item">All Sides (default)</div>
<div class="item top-only">Top Shadow</div>
<div class="item right-only">Right Shadow</div>
<div class="item bottom-only">Bottom Shadow</div>
<div class="item left-only">Left Shadow</div>



/*Downloaded from */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

.top-only {
  clip: rect(-20px, auto, auto, 0);

.right-only {
  clip: rect(auto, 100px, auto, 0);

.bottom-only {
  clip: rect(auto, auto, 100px, 0);

.left-only {
  clip: rect(auto, auto, auto, -20px);

.item {
  background-color: #EEE;
  border: 1px solid #888;
  text-align: center;
  width: 80px;
  height: 80px;
  padding: 10px 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 40px;
.item:nth-child(1) {
  left: 120px;
.item:nth-child(2) {
  left: 240px;
.item:nth-child(3) {
  left: 360px;
.item:nth-child(4) {
  left: 480px;
.item:nth-child(5) {
  left: 600px;