UI Shadow Generator

Create perfect CSS shadows for cards, buttons, and UI elements

CSS Code

/* Element Shadow */
.element {
  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
  background-color: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  width: 300px;
  height: 200px;
}

Shadow Presets

Shadow Layers

Layer 1
0px
4px
6px
-1px
10%

Element Style

300px
200px
12px
1px