Текст градиентом

26 декабря 2022

Если вы захотите разнообразить ваш сайт цветными заголовками, то можете попробовать использовать градиент при оформлении текста

ЛУЧШЕ ВСЕГО ЭТО БУДЕТ СМОТРЕТЬСЯ НА ЗАГОЛОВКЕ

Но можно сделать такой градиент и на обычном тексте. Главное умоляю вас — не переборщите. Помните, что пёстрые сайты это часто все-таки признак плохого вкуса:)

Как это сделано:

Необходимо добавить на страницу HTML-блок, в котором описать новые стили цвета выбранным блокам:

<style>
#section-5375184 section :is(h1,h2,h3,p) {
	color: transparent;    
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(90deg, #6287f7, #ff01ff);
}
</style>

Не забудьте, что #section-5375184 в вашем конкретном случае будет свой!

Также вы можете менять цвет и направление градиента (как это сделано в примере — на заголовке слева на право, а в тексте снизу вверх). Для этого вам надо в параметре background-image сменить HEX-значения цветов и угол наклона градиента. Обратите внимание, что тут не совсем привычные угла и ноль/360 — это не слева на право, а снизу вверх :)