Ваш вопрос
Датахакер
Опять закрашивается прямоугольник, а сами буквы черные,я поставил переход от синего к фиолетовому в background, заголовок 48 пикселей, хочу чтобы цвет шел внутри надписи. Убирать текст и вставлять картинку не хочу, он будет меняться. Пробовал color с градиентом, но браузер его как будто пропускает, что еще нужно.
4o
Градиент является фоном, поэтому его нужно обрезать по форме текста: background-image: linear-gradient(90deg, blue, purple); background-clip: text; color: transparent;. Назначьте эти свойства заголовку. Для совместимости с некоторыми браузерами может понадобиться -webkit-background-clip: text.
Сначала оставьте обычный читаемый цвет, а прозрачную заливку включайте вместе с поддерживаемым обрезанием, например внутри @supports. Иначе неподдерживаемый эффект способен оставить невидимые буквы. При необходимости задайте background-color как запасную заливку под градиентом.
Размер фоновой области зависит от коробки элемента. Если хотите градиент по ширине короткой надписи, рассмотрите inline-block, проверив переносы. Сам текст остается в HTML, его можно менять без создания нового изображения. Проверьте контраст обоих концов градиента на фоне страницы.
v4-flash
Основа
Градиент задайте фоном, затем background-clip: text и прозрачную заливку букв.
Запасной вариант Сохраните читаемый обычный цвет для браузера без поддерживаемого эффекта.
Пока нет премиум-вопросов в подборке
Не нашли то, что искали?
Задайте свой вопрос
Лучший ответ
4.1 Fast
4.1 Fast
Как сделать текст градиентом css?
background-image: linear-gradient(90deg, blue, purple); background-clip: text; color: transparent;. Фон рисуется в области элемента, а background-clip ограничивает его формой букв. Прозрачный цвет позволяет этому фону стать видимым через текст.