Collection of free CSS box-shadow code examples from Codepen and other resources.

Related Articles

  1. CSS Text Shadow Effects
Demo image: Saturated vs Desaturated Box-Shadow

Author

  • Adam Argyle

Made with

  • HTML / CSS

About a code

Saturated vs Desaturated Box-Shadow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Dropplets

Author

  • Oscar Salazar

Made with

  • HTML / CSS (SCSS)

About a code

Dropplets

SVG filters and CSS shadows.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • yoksel

Made with

  • HTML / CSS (SCSS)

About a code

Box Shadow Piano

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Parallax Shadows (Mobile-Friendly)

Author

  • Janne Aukia

Made with

  • HTML / CSS / JS

About a code

Parallax Shadows (Mobile-Friendly)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Image Shadows

Author

  • Oscar Marcelo

Made with

  • HTML (Pug) / CSS (Sass)

About a code

Image Shadows

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Andrew Spencer

Made with

  • HTML / CSS (SCSS)

About a code

Multiple Shadows

Playing with placing multiple shadows on an element. This gives it the look of depth with a "natural" shadow, as if there was actually a light shining on the page.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Pixel Animation

Author

  • Lorena Sarasua

Made with

  • HTML / CSS (SCSS)

About a code

CSS Pixel Animation

8 bit pixelated woman made with box-shadows on a single div.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Giana

Made with

  • HTML / CSS (SCSS)

About a code

Button Hover Effects with box-shadow

Making some basic animations with box-shadows. No extra elements or even pseudo elements required. Tips: - We're setting all the blurs to 0 since we want a solid fill; - Add the inset keyword so the box-shadow is on the inside of the element; - Animating the inset shadow on hover looks like the element is filling in from whatever side you specify ([top] and [left] accept negative values to become [bottom] and [right]); - Multiple shadows can be stacked; - If you're animating multiple shadows, be sure to keep the same number of shadows so the animation is smooth. Otherwise, you'll get something choppy.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • timaronan

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

box-shadow Spill

Using offsetting inset and outer box-shadows to create a 3D-like effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

box-shadow Pseudo Loaders

Leveraging the use of box-shadow to create interesting loading effects with just pseudo elements. Just by adding a class to an element you can get a cool loading animation in an overlay.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Drew McConville

Made with

  • HTML / CSS (SCSS) / JS

About a code

Dynamic Box Shadow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Demo image: Isolating CSS Box Shadows

Author

  • TundraTech

Made with

  • HTML / CSS (SCSS)

About a code

Isolating CSS Box Shadows

A simple & often misunderstood CSS fundamental. To isolate a single shadow we apply a negative spread and offset in the desired direction, then add a blur radius of equal distance to compensate. For inset shadows, the spread remains constant but we apply an offset in the opposite(-ve) direction. For multiple sides/shadows, simply combine any of the desired single-side rules into a comma separated list.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Material Design Box Shadows

Author

  • Samuel Thornton

Made with

  • HTML / CSS

About a code

Material Design Box Shadows

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • yoksel

Made with

  • HTML / CSS (SCSS)

About a code

Live Stripes

Made with box-shadows. CSS only.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Doug Avery

Made with

  • HTML / CSS

About a code

39 Ridiculous Things To Do With CSS3 Box Shadows

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -