linear-gradient를 이용해서 그라데이션 선을 만들었습니다.

linear-gradient(방향, 색 n%)

• 디폴트 방향: 위 -> 아래
• n%를 통해 색이 차지할 퍼센트 지정 가능
• 색 여러개 지정 가능

사용 예시

background: linear-gradient(#e66465, #9198e5);

background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);

background: linear-gradient(to left, #333, #333 50%, #eee 75%, #333 75%);

background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);

내가 적용한 것

<hr>에 그라데이션을 적용하여 그라데이션 선을 만들었습니다.

.lifeline hr {
    position: relative;
    top: 11px;
    height: 2px;
    background: linear-gradient(to right, #eee, #000 5%, #000 95%, #eee);
    border: 0;
}