Как сделать градиентную тень у текста?

Question

Как сделать градиентную тень у текста?

Рейтинг: 0Ответов: 3Опубликовано: 01.02.2023

В фигме есть такой текст:

В фигме это реализовано наложением друг на друга нескольких слоев текста. Можно ли это сделать на CSS?

css html

Источник: Stack Overflow на русском

Answer 1

▲ 1

Вот типа того, но не знаю как сделать градиент горизонтальный.

p {
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-shadow:3px 3px 10px red,-3px -3px 10px yellow;
}

<p>25000 Dollars</p>

Answer 2

▲ 1

body { background-image: linear-gradient(to right, #24293f, #293c5c); }

h1 {
  position: relative;
  font: 64px/1em 'Arial Black', sans-serif;
  text-align: center;
  color: #fff;
}
h1::before {
  content: '25 000 RUB';
  position: absolute;
  z-index: -1;
  text-align: center;
  background-image: linear-gradient(to right, #f53d5c, #79a9ec);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 5px transparent;
  text-stroke: 5px transparent;
  -webkit-background-clip: text;
  background-clip: text;
  filter: blur(2px);
}

<h1>25 000 RUB</h1>

Answer 3

▲ 0

Вот пример с svg: https://codepen.io/sethjenks/pen/KpNJZp

Хотя мне кажется твой пример слишком кастомный и его можно было вставить как картинку в вёрстку. Если нужно, чтоб можно было выделять, можно поверх картинки белый текст сделать, подогнав.

Моя идея: сделать 2 слоя с одинаковым текстом, используя абсолютное позиционирование. Верхний слою сделать color: #fff. А нижнему слою задать linear-gradient. Если делать такую штуку для каждой буквы, можно замарочиться и сделать красиво. Вот я что-то пробовал, может наводки какие-то даст.

.text {
  position: relative;
  font-family: sans-serif;
 
}

.text-down {
  position: absolute;
  font-size: 72px;
  background-image: -webkit-linear-gradient(-180deg, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  top: 0;
}

.text-up {
  position: absolute;
  top: 1.5px;
  color: #fff;
  font-size: 68px;
  letter-spacing: 2px;
}

<div class="text">
<span class="text-down">25 000 РУБ</span>
<span class="text-up">25 000 РУБ</span>
</div>

Интересный вопрос, не сталкивался с таким.

Как сделать градиентную тень у текста?

Ответы