Как задать тень тексту при градиентном фоне текста?

Question

Есть текст с градиентом:

<div class="text"></div>

.text {
    background: linear-gradient(180deg, #fff981 33%, #c9870a 66%, #ffd339);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Как тексту можно задать тень text-shadow, чтобы градиент остался?

Если я добавляю тень тексту, то текст становится черным.

text-shadow: 0 0 1px #000;

Answer 1

Тени при помощи filter: drop-shadow(); - поддерживается всеми браузерами кроме IE

.text {
    background: linear-gradient(180deg, #fff981 33%, #c9870a 66%, #ffd339);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 50px;
    font-weight: 700;
    filter: drop-shadow(2px 2px 1px black);
}

<div class="text">tesrfdfs</div>

БЛОГ НА HUSL

Как задать тень тексту при градиентном фоне текста?

Ответы (1 шт):