🎨 Box Shadow Generator

box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.25);

Choose a color:

🎯 Presets

Realistic Shadow Generator

Generated CSS with `::after`


.shadow-box {
  position: relative;
  z-index: 1;
}
.shadow-box::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -30px;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  filter: blur(30px);
  transform:
    translate(-50%, 0)
    translateX(0px)
    translateY(0px)
    scaleX(1.5)
    scaleY(1)
    skew(0deg, 0deg);
  z-index: -1;
}

Explore Programming Topics