HR curved shadow

There are easier ways of creating this type of shadow (using only ::before with a significant border-radius), but I'm saving this method for historical purposes...

by mlms13

HTML

<hr class="shadow" />

CSS

body {
    margin: 40px;
}
hr.shadow {
    border: 0;
    border-bottom: 24px solid #fff;
    position: relative;
}
.shadow::before, .shadow::after {
    background: transparent;
    box-shadow: 0 6px 12px rgba(0,0,0,0.6);
    bottom: -16px;
    content: "";
    height: 4px;
    position: absolute;
    width: 48%;
    z-index: -1;
}
.shadow::before {
    left: 2%;
    -webkit-transform: rotate(1deg);    
}
.shadow::after {
    right: 2%;
    -webkit-transform: rotate(-1deg);    
}