20+ CSS Box Shadow Examples + Source Code

CSS Box Shadow – Are you looking for CSS Box Shadow, If yes then in this post I am going to share hand-picked CSS Box Shadow for you. Shadow effect on hover makes your div or button 3d that’s look cool. You can use these CSS Box Shadow in your next web based projects.


CSS Box Shadow

Following are the list of CSS Box Shadow.

Button hover effects with box-shadow DEMO

Making some basic animations with box-shadows. No extra elements or even pseudo elements required. Check out my button collection for more.

Material Design Box Shadows DEMO

Based on https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d

CSS3 Box Shadows Effects DEMO


Box-Shadow Demonstration DEMO

Basic box-shadow how-to

Hover box shadow DEMO

Simple box-shadow effect on hover.

CSS Inner Box Shadow – Top and Bottom Only DEMO

An example demonstrating inner box shadow on the top and bottom of a block element.

Pulse animation with box-shadow DEMO

Hover buttons using box-shadow inset DEMO

This is a simple :hover on buttons using transition and box-shadow inset css3 property.

Photo Gallery: with Box Shadow DEMO

Still messing around with the Box Shadow: Page Curl Effects Pen. Came up with Photo Gallery.

Box shadow only bottom DEMO

if you want add box shadow for only bottom (top, left, right) of box, it’s here

CSS box shadow animation DEMO

Using box shadow for nice hover animation.

Box Shadow Generator DEMO

a box shadow generator created with vue

CSS3 Generator: box-shadow DEMO

Easily generate CSS code with customized shadows. Nice pre-sets make designing a box lightnig fast…

<Table> Responsive DEMO

These is a “<Table> Responsive” with CSS3 transition, box-shadow, transform properties. Responsive Web Design technology & without JS.

Box shadow btns DEMO

Box Shadows DEMO

Testing different box shadow and drop shadow options

CSS3 Checkbox Styles DEMO

A few different checkbox styles

CSS3 – Box Shadow: Page Curl Effect DEMO

No Javascript. Just HTML and CSS.

Isolating CSS Box Shadows DEMO

How to make CSS box shadows appear on one or multiple sides by isolating and combing multiple shadows with ease.

Drawing with box-shadow DEMO

Drawing with box-shadow

box-shadow border DEMO

css box-shadow border demo for css-tricks forum question: http://css-tricks.com/forums/discussion/21499/stylist-css-borde

Single Element Box Shadow Cow DEMO

My preemptive attempt at making something notable for HolySpaceCowsWeekend. box-shadow ftw Safari no likey

Color blended box-shadows DEMO

Color blended box-shadows to create a more natural saturated shadow. Unfortunately, it doesn’t seem to work in Chrome.

I Hope you liked Hand-picked list of CSS Box Shadow, Don’t forget to Subscribe My Public Notebook for more useful Hand-picked HTML and CSS code examples, tutorials and articles.