{"id":23626,"date":"2015-04-07T23:01:45","date_gmt":"2015-04-07T15:01:45","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23626"},"modified":"2023-03-31T19:14:21","modified_gmt":"2023-03-31T11:14:21","slug":"creative-css-shadows","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/creative-css-shadows\/","title":{"rendered":"18 Amazing Effects You can Create with CSS3 Box Shadows"},"content":{"rendered":"

We can do a lot of things with CSS like build modals<\/a>, make beautiful text effects<\/a>, draw a Viking shield<\/a>, and even create a heart shape<\/a>. There\u2019s 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<\/strong>.<\/p>\n

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

Squishy Toggle button<\/a> By soulwire<\/a><\/h2>\n

\n<\/p>

Long Shadow<\/a> by Roikles<\/a><\/h2>\n

\n<\/p>

Flat Long Shadow<\/a> by Hugo<\/a><\/h2>\n

\n<\/p>

Oval box shadow<\/a> By Jcorpus<\/a><\/h2>\n

\n<\/p>

Collision Balls<\/a> By Abderrahmane<\/a><\/h2>\n

\n<\/p>

257 in 3D<\/a> By Creme<\/a><\/h2>\n

\n<\/p>

Apple Store icon<\/a> By Joshbader<\/a> <\/h2>\n

\n<\/p>

Box shadow gradient for ghost button<\/a> By Akwright<\/a><\/h2>\n

\n<\/p>

Batman Made with CSS box shadow<\/a> By Nickmblain<\/a><\/h2>\n
<\/pre>\n
Frosty Beer<\/a> By Nickmblain<\/a><\/h2>\n
<\/pre>\n
3D text<\/a> by Zitrusfrisch<\/a><\/h2>\n
\n<\/p>
Animated text shadow<\/a> By Carpenumidium<\/a><\/h2>\n
\n<\/p>
Transform text  with shadow<\/a> By Chriseisenbraun<\/a><\/h2>\n
\n<\/p>
Amazing layered shapes<\/a> By Snhasani<\/a><\/h2>\n
\n<\/p>
Seconds counter<\/a> By martingrand<\/a><\/h2>\n
\n<\/p>
Animated pattern made with shadow<\/a> By yoksel<\/a><\/h2>\n
\n<\/p>
Color Spectrum<\/a> By jaicab<\/a><\/h2>\n
\n<\/p>
Rainbow circle<\/a> By colin<\/a><\/h2>\n
\n<\/p>