18 Amazing Effects You can Create with CSS3 Box Shadows

We can do a lot of things with CSS like build modals, make beautiful text effects, draw a Viking shield, and even create a heart shape. There’s also plenty that we can do with CSS3 Box Shadows, and in this post we are going to look at how some designers play around with CSS shadows to some great results.

In this list you will see CSS shadows used in creating ticking counters, 3D effects on text, pixel art, simple animation and more. To see more of the same work, do check out the designers’ portfolios. Know of any other great uses of CSS Shadows? Let us know in the comments.

Squishy Toggle button By soulwire

Long Shadow by Roikles

Flat Long Shadow by Hugo

Oval box shadow By Jcorpus

Collision Balls By Abderrahmane

257 in 3D By Creme

Apple Store icon By Joshbader

Box shadow gradient for ghost button By Akwright

Batman Made with CSS box shadow By Nickmblain

Frosty Beer By Nickmblain

3D text by Zitrusfrisch

Animated text shadow By Carpenumidium

Transform text with shadow By Chriseisenbraun

Amazing layered shapes By Snhasani

Seconds counter By martingrand

Animated pattern made with shadow By yoksel

Color Spectrum By jaicab

Rainbow circle By colin