Здесь есть учебник о том, как это сделать в Photoshop:
Я пытаюсь сделать это только с помощью CSS. Чем ближе я могу попасть, тем ниже fiddle.
hr.fancy-line {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0));
box-shadow: 0px -2px 4px rgba(136,136,136,0.75);
}
<hr class="fancy-line"></hr>
Выполнение градиента в тени кажется довольно жестким. Любые идеи, как я мог бы улучшить это?