"Drawing" with box-shadow

#css #webdev

I like to share one "trick" or technique that I really like, it's one of those things that's good to have in the tool belt and I've found myself using it pretty often over the years.

The box-shadow property

When you think of box shadow, it's easy to only think of it as shadows on boxes, but it can do more. You can actually use it to draw in a sense.

Here we have two boxes, one is obviously using a box shadow, but the other one is as well.

You can "draw" on the outside:

.el {
    box-shadow: 
        0 0 0 3px red,
        0 0 0 8px green,
        0 0 0 10px blue;
}

or "draw" on the inside:

.el {
    box-shadow: 
        inset 0 0 0 3px red,
        inset 0 0 0 8px green,
        inset 0 0 0 10px blue;
}

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

You can get really creative with this technique.

Like the tablet above, it has two HTML elements with psuedo ::before and ::after elements. Most of the layers are box-shadows. 🙂