A Few Box-Shadow Examples

Thanks to CSS3, we don't have to rely on image editors anymore to create great drop shadows. Here you'll find a few nice drop shadow examples. Get inspired by these to create your own designs. Refer to the box-shadow shorthand snippet for help with the syntax of the box-shadow property.

Colored Shadows

Colored drop shadows are hip right now, so here you go:

Colored box shadow 1

.shadow1 {
  box-shadow: 0 20px 50px rgba(59, 43, 91, 0.7);
}

Colored box shadow 2

.shadow2 {
  box-shadow: 0 20px 50px rgba(240, 46, 170, 0.7);
}

Colored box shadow 2

.shadow3 {
  box-shadow: 0 20px 50px rgba(8, 112, 184, 0.7);
}

Multiple Shadows

Separate multiple drop shadow definitions with a comma and create has many drop shadows as you want on elements:

Multiple box shadows 1

.shadow4 {
  box-shadow: 0px 10px 1px #ddd, 0 10px 20px #ccc;
}

Multiple box shadows 2

.shadow5 {
  box-shadow: -10px -10px 30px 4px rgba(0,0,0,0.1),
              10px 10px 30px 4px rgba(45,78,255,0.15);
}

Multiple box shadows 3

.shadow6 {
  box-shadow: 5px 5px rgba(0, 98, 90, 0.4),
              10px 10px rgba(0, 98, 90, 0.3),
              15px 15px rgba(0, 98, 90, 0.2),
              20px 20px rgba(0, 98, 90, 0.1),
              25px 25px rgba(0, 98, 90, 0.05);
}

Multiple box shadows 3

.shadow7 {
  box-shadow: 0 5px rgba(93, 64, 55, 0.4), 0 10px rgba(93, 64, 55, 0.3),
              0 15px rgba(93, 64, 55, 0.2), 0 20px rgba(93, 64, 55, 0.1),
              0 25px rgba(93, 64, 55, 0.05),
              -5px 5px 40px rgba(100, 0, 0, 0.4);
}

Inset Shadows

Use the inset keyword to create inner-shadows:

Multiple box shadows 3

.shadow8 {
  box-shadow: 5px 5px rgba(0, 98, 90, 0.4),
              10px 10px rgba(0, 98, 90, 0.3),
              15px 15px rgba(0, 98, 90, 0.2),
              20px 20px rgba(0, 98, 90, 0.1),
              25px 25px rgba(0, 98, 90, 0.05);
}

Multiple box shadows 3

.shadow9 {
  box-shadow: 0 -20px 15px -10px rgba(255, 255, 0, 0.3) inset,
              0 20px 15px -10px rgba(255, 255, 0, 0.3) inset,
              0 0 10px rgba(0, 0, 0, 0.1);
}

Multiple box shadows 3

.shadow10 {
  box-shadow: inset -12px -8px 40px #464646;
}
✖ Clear

🕵 Search Results

🔎 Searching...