<div class="one">box-shadow</div>
<div class="two">drop-shadow</div>
<div class="three">box-shadow</div>
<div class="four">drop-shadow</div>
<div class="five">box-shadow</div>
<div class="six">drop-shadow</div>
<div class="seven">drop-shadow</div>
.one,.two,.three,.four,.five,.six,.seven {
  margin:10px 20px;
  display:inline-block;
  font-size:24px;
  padding:.5em 2em;
  border: 5px dashed #ace;
}
.one {
  box-shadow: 4px 4px 4px #fce;
}
.two {
   filter: drop-shadow(4px 4px 4px #fce);
}
.three {
  background:#ace;
  border-radius:8px;  
  position:relative;
  box-shadow: 2px 2px 2px #fce;
}
.three:before {
  content:'';
  width:0;
  height:0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #ace;
  position:absolute;
  right:-15px;
  top:15px;
}
.four {
  background:#ace;
  border-radius:8px;  
  position:relative;
  filter: drop-shadow(2px 2px 2px #fce);
}
.four:before {
  content:'';
  width:0;
  height:0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #ace;
  position:absolute;
  right:-15px;
  top:15px;
}
.five {
  border:none;
  background:linear-gradient(135deg, transparent 5px, #ace 0) top left,
    linear-gradient(-135deg, transparent 5px, #ace 0) top right,
    linear-gradient(-45deg, transparent 5px, #ace 0) bottom right,
  linear-gradient(45deg, transparent 5px, #ace 0) bottom left;
  background-size:50% 50%;
  background-repeat:no-repeat;
  box-shadow: 4px 4px 4px #fce;
}
.six {
  border:none;
  background:linear-gradient(135deg, transparent 5px, #ace 0) top left,
    linear-gradient(-135deg, transparent 5px, #ace 0) top right,
    linear-gradient(-45deg, transparent 5px, #ace 0) bottom right,
  linear-gradient(45deg, transparent 5px, #ace 0) bottom left;
  background-size:50% 50%;
  background-repeat:no-repeat;
  filter: drop-shadow(2px 2px 2px #fce);
}
.seven {
  text-shadow:4px 4px #fff;
   filter: drop-shadow(4px 4px 2px #fce);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.