0

введите сюда описание изображения

h1 {
  font-family: ben-krush;
  font-size: 100px;
  text-shadow: 3px 1px 2px rgba(76, 104, 119, 0);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(51deg, #ff0000 14%, #09bef3 19%);
}
<h1>Акция!</h1>

Если использовать отдельно градиент - градиент отображается.
При применении тени text-shadow - тень закрывает сверху сам градиент сплошным цветом тени.

1 ответ 1

1

Если у вас есть возможность использовать position: absolute, то можно добавить ещё 1 такую же надпись, задать обеим position: absolute, раскидать z-index, чтобы одна надпись была строго под другой и первой сделать градиент, а второй тень, у которой z-index меньше..

стили для H1:

h1 {
   postion: absolute;
   -webkit-text-fill-color: transparent;
   z-index: 1;
   text-shadow: 3px 1px 2px rgb(76, 104, 119);
}

Акция]стиль_2общие стили

2
  • 1
    Пожалуйста, используйте вставку кода как текста, а не изображений.
    – user207618
    6 июн 2018 в 8:44
  • @Alexey Zolotov - спасибо за решение
    – Proshka
    6 июн 2018 в 13:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.