Online Box Shadow CSS Generator

Online tool to generate CSS box shadow effects with templates for web designers.

ADVERTISEMENT

Examples

.box-1 {
  box-shadow: 5px 10px 10px 5px #888888;
}
.box-2 {
  box-shadow: 5px 10px 10px #888888,
    -5px -10px 10px #ffffff;
}
.box-3 {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
    inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.box-4 {
  box-shadow: 0 0 10px #ff0000,
    0 0 10px 5px #888888;
}
.box-5 {
  box-shadow: 0 0 10px 10px #888888,
    0 0 10px 20px #ffffff;
}
.box-6 {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.box-7 {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.box-8 {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.box-9 {
  box-shadow: 0 0 10px #4bc0d2;
}
.box-10 {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 
  0 0 20px #ff7f50;
}
.box-11 {
  box-shadow: 0 0 0 4px #ffcc00;
}
.box-12 {
  background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0), linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);

}
.box-13 {
  border: 4px solid;
  border-image: linear-gradient(45deg, #ff7f50, #4bc0d2);
  border-image-slice: 1;
}
.box-14 {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.box-15 {
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.1), -8px -8px 16px rgba(255, 255, 255, 0.5);
}
.box-16 {
  box-shadow: 0 0 10px rgba(255, 165, 0, 0.3);
}
.box-17 {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}
.box-18 {
  box-shadow: 0 0 0 4px #007bff;
}
.box-19 {
  box-shadow: inset 0 0 4px #007bff;
}
ADVERTISEMENT