Свойство text-fill-color

Описание

Устанавливает цвет заливки символов текста. Браузеры при наличии color игнорируют его и отдают предпочтение text-fill-color.

text-fill-color обычно применяется для создания различных эффектов шрифта, например, текст с градиентом или контуром.

Браузеры поддерживают свойство с префиксом -webkit-text-fill-color.

Синтаксис

text-fill-color: цвет | transparent;

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
 #test {
 font-weight: 900;
 background: linear-gradient(45deg, #c42222, #2200ff);
 background-clip: text;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 }
 </style>
 <h2 id='test'>Градиентный текст</h2>
</body>
</html>

Градиентный текст

Читайте также

Свойство border-bottom-right-radius

Устанавливает радиус скругления правого нижнего угла рамки.<br>Если рамка не задана, то скр...

Свойство overflow-x

Управляет отображением содержания блочного элемента по горизонтали, если контент целиком не помещ...

Стиль для переключателей в неопределённом состоянии

Псевдокласс :indeterminate задаёт стиль для переключателей, когда они находятся в неопределённом ...

Стиль поля формы доступным для редактирования

Применяется к полям формы, доступных для изменения. Псевдокласс :read-write является противополож...

Свойство border-top

Позволяет одновременно установить толщину, стиль и цвет верхней границы элемента.<br>Значен...