Draw with box shadow

I like to share a technique with box shadows. I've found myself using it pretty often. When you think of box shadow, it's easy to only think of it as shadows on boxes, but you can use it to draw multiple lines.

You can "draw" on the outside

CSS

  
  
    .outside {
    box-shadow:
        0 0 0 3px lightsalmon,
        0 0 0 8px rebeccapurple,
        0 0 0 10px turquoise;
}

or you can "draw" on the inside

CSS

  
  
   .inside {
    box-shadow:
        inset 0 0 0 3px lightsalmon,
        inset 0 0 0 8px rebeccapurple,
        inset 0 0 0 10px turquoise;
}

You apply multiple box shadows to draw lines that overlap. So the above would result in a border of 3px lightsalmon, 5px rebeccapurple, 2px turquoise and in this lies the power.

outside

inside

Get creative with this technique

The tablet below has two HTML elements with psuedo ::before and ::after elements. Most of the layers that makes the tablet are box-shadows.

HTML

  
  
    <div class="shell">
    <span class="bottom-btns"></span>
</div>


              .tablet::before {
              border-radius: 25px;
              box-shadow:
                  0 0 0 20px black;
          }
    

              .tablet {
              box-shadow:
                  0 0 0 28px black;
          }
    

              .tablet {
              box-shadow:
                  0 0 0 28px black,
                  0 0 0 29px #bbb;
          }
    

              .tablet {
              box-shadow:
                  0 0 0 28px black,
                  0 0 0 29px #bbb,
                  0 0 0 31px #ccc;
          }
    

              .tablet {
              box-shadow:
                  0 0 0 28px black,
                  0 0 0 29px #bbb,
                  0 0 0 31px #ccc,
                  0 0 0 32px #fff;
          }
    

              .tablet {
              box-shadow:
                  0 0 0 28px black,
                  0 0 0 29px #bbb,
                  0 0 0 31px #ccc,
                  0 0 0 32px #fff,
                  0 0 20px 35px rgba(0, 0, 0, 0.5);
          }
    

              .tablet-controls {
              background: #888;
          }
    

              .tablet-controls {
              box-shadow: 0 1px 0 0 #bbb;
          }
    

              .tablet-controls {
              box-shadow:
                  0 1px 0 0 #bbb,
                  0 2px 10px 0 rgba(0, 0, 0, 0.5);
          }
    

              .tablet::after {
              background: #888;
          }
    

              .tablet::after {
              box-shadow:
                  1px 0 0 0 #bbb;
          }
    

              .tablet::after {
              box-shadow:
                  1px 0 0 0 #bbb,
                  2px 0 10px 0 rgba(0, 0, 0, 0.5);
          }

CSS

  
  
   .tablet {
    width: 75vw;
    height: 80vh;
    max-height: 768px;
    max-width: 900px;
    margin: 12.5% auto;
    border-radius: 5px;
    position: relative;
    z-index: 1;

    box-shadow:
        0 0 0 28px black,
        0 0 0 29px #bbb,
        0 0 0 31px #ccc,
        0 0 0 32px #fff,
        0 0 20px 35px rgba(0, 0, 0, 0.5);
}

.tablet::before,
.tablet::after {
    position: absolute;
    content: "";
}

.tablet::before {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background:
        linear-gradient(rgba(0,0,0,0.9), rgba(255,255,255,0.5)),
        url(/assets/images/draw-box-shadow-bg.jpg);

    background-size: cover;
    background-clip: padding-box;
    border-radius: 25px;
    z-index: 2;
}

.tablet.step-1::before {
    box-shadow: 0 0 0 20px black;
}

.tablet::after {
    left: 100%;
    top: 100%;
    height: 35px;
    width: 2px;
    background: #888;
    border-radius: 15%;
    transform: translate(32px, -100px);

    box-shadow:
        1px 0 0 0 #bbb,
        2px 0 10px 0
        rgba(0, 0, 0, 0.5);
}

.tablet-controls,
.tablet-controls::after {
    position: absolute;
    content: "";
    height: 2px;
    width: 70px;
    border-radius: 15%;
}

.tablet-controls {
    bottom: -35px;
    left: 100%;
    transform: translateX(-250px);
}

.tablet-controls,
.tablet-controls::after {
    background: #888;
    box-shadow:
    0 1px 0 0 #bbb,
    0 2px 10px 0 rgba(0, 0, 0, 0.5);
}

.tablet-controls::after {
    left: 100px;
}