CSS Shadows: A Deep Dive Part 4 – Advanced usages

CSS Shadows: A Deep Dive Part 4 – Advanced usages
Reading Time: 2 minutes

In the last 3 posts, we looked at CSS Shadows, using text-shadow, box-shadow and filter: drop-shadow(). Now let’s take a look at a few of the great things you can use them for, for extra creativity, and design ideas.

For start, here are a bunch of box-shadow examples you can easily use:

See the Pen box-shadow examples by Lurx (@lurx) on CodePen.

Using box-shadow, we can add multiple shadows to create the visual of multiple borders to our element:

See the Pen Box-shadow: multiple borders by Lurx (@lurx) on CodePen.

Here are a few great things you can do with smart usages of text-shadow, box-shadow and filter: drop-shadow():

Squishy Toggle Buttons (by Justin Windle)

See the Pen Squishy Toggle Buttons by Justin Windle (@soulwire) on CodePen.

Long Shadow Gradient (by roikles)

See the Pen Long Shadow Gradient Mixin by roikles (@roikles) on CodePen.

Shade – Shadow mixin (by Hugo DarbyBrown)

See the Pen Shade – Shadow Mixin by Hugo DarbyBrown (@hugo) on CodePen.

Curved box shadow (by Julio Corpus)

See the Pen Shadow by Julio Corpus (@jcorpus) on CodePen.

Animated text-shadow (by carpe numidium)

See the Pen [webkit] Animated “text-shadow” pattern by carpe numidium (@carpenumidium) on CodePen.

3D Text effects (by Chris Eisenbraun)

See the Pen CSS Text Shadow by Chris Eisenbraun (@chriseisenbraun) on CodePen.

3D Layers (by Naser Hassani)

See the Pen Nar Sang by Naser Hassani (@snhasani) on CodePen.

Seconds Counter (by Martin Grand)

See the Pen seconds counter by Martin Grand (@martingrand) on CodePen.

Animated pattern (by yoksel)

See the Pen Just playing with ShadowPainter by yoksel (@yoksel) on CodePen.

Rainbow circle (by Colin McClure)

See the Pen Rainbow Circle by Colin McClure (@colin) on CodePen.

3D Text (by Me)

See the Pen 3D Text with text-shadow by Lurx (@lurx) on CodePen.

You could use :before and :after, and with a little hard work, you could create something like this:

See the Pen 8-bit art by Lurx (@lurx) on CodePen.

And, with a little us of SASS functions, box-shadow can be used to create 8-bit style characters:

See the Pen CSS Daily Images: Monsters week! by Lurx (@lurx) on CodePen.

I hope these posts helped your knowledge and inspiration. Thanks for reading!