Текст тень прямо под текстом

Question

я получил на странице что-то вроде этого:

<h1 class="page-header">Some text</h1> 

и CSS является:

font-size: 60px; 
text-transform: uppercase; 
text-align: center; 
color: #61430c; 
font-weight: 700; 
margin: 0 0 100px; 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
background: -webkit-linear-gradient(-89deg, #7D570F 38%, #452E00 56%); 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent; 

Можно добавить туда тень под текстом только выглядеть как простой размыл линии ? Благодарю.

Answer 1

Вы не сможете легко достичь этого. Мое предложение было бы использовать псевдоэлемент ::after, чтобы добавить размытый эллипс/овал под текстом (вот Fiddle).

.page-header::after { 
    content: ''; 
    display: block; 
    width: 383px; 
    height: 6px; 
    background: rgba(0,0,0,.1); 
    box-shadow: rgba(0,0,0,.1) 0px 0px 7px; 
    -moz-border-radius: 100px/50px; 
    -webkit-border-radius: 100px/50px; 
    border-radius: 400px/10px; 
    margin: 0 auto; 
    position: relative; 
    bottom: 17px; 
} 

.page-header { 
    font-size: 60px; 
    text-transform: uppercase; 
    text-align: center; 
    color: #61430c; 
    font-weight: 700; 
    margin: 0 0 100px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    background: -webkit-linear-gradient(-89deg, #7D570F 38%, #452E00 56%); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}