3D Box Shadow - HTMLCSSFreebies

Try the 3D box-shadow model by employing the multiple layers of box-shadow.

Box Shadow Properties

Horizontal

Vertical

Blur

Spread

Inset

Color

Shadow 0

Shadow 1

Shadow 2

Shadow 3

Shadow 4

Shadow 5

Shadow 6

Shadow 7

Shadow 8

Shadow 9

Shadow 10

Shadow 11

Shadow 12

Shadow 13

Shadow 14

Shadow 15

Box Shadow

Presets

All Bootstrap Colorful Directional Fluent UI Inset Layered Material Design Primer Tailwind CSS Trendy UI

Element Properties

Width

Height

Radius

Color

Box Shadow CSS

box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.22),
1px 0px 0px 0px rgba(0,0,0,0.22),
1px 2px 0px 0px rgba(0,0,0,0.22),
2px 1px 0px 0px rgba(0,0,0,0.22),
2px 3px 0px 0px rgba(0,0,0,0.22),
3px 2px 0px 0px rgba(0,0,0,0.22),
3px 4px 0px 0px rgba(0,0,0,0.22),
4px 3px 0px 0px rgba(0,0,0,0.22),
4px 5px 0px 0px rgba(0,0,0,0.22),
5px 4px 0px 0px rgba(0,0,0,0.22),
5px 6px 0px 0px rgba(0,0,0,0.22),
6px 5px 0px 0px rgba(0,0,0,0.22),
6px 7px 0px 0px rgba(0,0,0,0.22),
7px 6px 0px 0px rgba(0,0,0,0.22),
7px 8px 0px 0px rgba(0,0,0,0.22),
8px 7px 0px 0px rgba(0,0,0,0.22);

Element CSS

.element {
    width: 250px;
    height: 250px;
    background-color: rgba(255, 255, 255, 1);
    color: #000;
    border-radius: 10px;
    box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.22),
1px 0px 0px 0px rgba(0,0,0,0.22),
1px 2px 0px 0px rgba(0,0,0,0.22),
2px 1px 0px 0px rgba(0,0,0,0.22),
2px 3px 0px 0px rgba(0,0,0,0.22),
3px 2px 0px 0px rgba(0,0,0,0.22),
3px 4px 0px 0px rgba(0,0,0,0.22),
4px 3px 0px 0px rgba(0,0,0,0.22),
4px 5px 0px 0px rgba(0,0,0,0.22),
5px 4px 0px 0px rgba(0,0,0,0.22),
5px 6px 0px 0px rgba(0,0,0,0.22),
6px 5px 0px 0px rgba(0,0,0,0.22),
6px 7px 0px 0px rgba(0,0,0,0.22),
7px 6px 0px 0px rgba(0,0,0,0.22),
7px 8px 0px 0px rgba(0,0,0,0.22),
8px 7px 0px 0px rgba(0,0,0,0.22);
  }