How to make the npm logo using only one HTML element.

Start with an element.

Give it a 'box-shadow' property. You can pass it x- and y- offsets to move around your 'shadow.'

Give your element multiple 'shadows' by separating the property values with commas.

Make the box-shadows larger by increasing the 'spread' value.

Add lots more box-shadows.

Add even more box-shadows. Turns out you can add just about as many box shadows as you like.

Add a few more box-shadows, and voila! You have a logo.

BONUS ROUND given the right :hover rule,
this is a cool way to make a logo appear...

by andrew richards site @drwrchrds github linkedin