Gradient text color
But not with rainbow colors but generate with other colors (for example white to grey/light blue gradient etc) I can’t find an easy solution for this. Any solutions?
7 Answers 7
I don’t exactly know how the stop stuff works. But I’ve got a gradient text example. Maybe this will help you out!
_you can also add more colors to the gradient if you want or just select other colors from the color generator
The way this effect works is very simple. The element is given a background which is the gradient. It goes from one color to another depending on the colors and color-stop percentages given for it.
For example, in rainbow text sample (note that I’ve converted the gradient into the standard syntax):
- The gradient starts at color #f22 at 0% (that is the left edge of the element). First color is always assumed to start at 0% even though the percentage is not mentioned explicitly.
- Between 0% to 14.25% , the color changes from #f22 to #f2f gradually. The percenatge is set at 14.25 because there are seven color changes and we are looking for equal splits.
- At 14.25% (of the container’s size), the color will exactly be #f2f as per the gradient specified.
- Similarly the colors change from one to another depending on the bands specified by color stop percentages. Each band should be a step of 14.25% .
So, we end up getting a gradient like in the below snippet. Now this alone would mean the background applies to the entire element and not just the text.
Since, the gradient needs to be applied only to the text and not to the element on the whole, we need to instruct the browser to clip the background from the areas outside the text. This is done by setting background-clip: text .
(Note that the background-clip: text is an experimental property and is not supported widely.)
Now if you want the text to have a simple 3 color gradient (that is, say from red — orange — brown), we just need to change the linear-gradient specification as follows:
- First parameter is the direction of the gradient. If the color should be red at left side and brown at the right side then use the direction as to right . If it should be red at right and brown at left then give the direction as to left .
- Next step is to define the colors of the gradient. Since our gradient should start as red on the left side, just specify red as the first color (percentage is assumed to be 0%).
- Now, since we have two color changes (red — orange and orange — brown), the percentages must be set as 100 / 2 for equal splits. If equal splits are not required, we can assign the percentages as we wish.
- So at 50% the color should be orange and then the final color would be brown . The position of the final color is always assumed to be at 100%.
Thus the gradient’s specification should read as follows:
If we form the gradients using the above mentioned method and apply them to the element, we can get the required effect.
Text Gradient in CSS
Create a text gradient effect in css is very simple and we can achieve it with a few lines of code, here how:
Let’s start by adding an H1 tag in the document body and let’s add some initial CSS styling
here the current result
Good, now we just need to add the gradient, to do this we can use the combination of background image and background clip.
let’s first set the background by using a gradient
and your preview will look something like this
This is not quite yet what we wanted so let’s make a couple of tweaks by adding the background clip property
seems like something is not quite right, in fact the background clipping around the text works but the text color is set so the background is not yet visible.
To fix this we just need to set the color as transparent and everything will work as we wanted
and here the final code and result:
background-clip is very well supported apart on IE11 & Opera min where is not, so please take it in consideration during your project.
You may need to create some logic to fallback the text to a certain color when the browser is not supporting the background-clip property.
Стили заголовков в CSS: градиенты
Заголовки должны быть большими, жирными и громкими, чтобы привлекать внимание пользователя за несколько секунд. Мы перевели статью о стилях заголовков, сегодня предлагаем изучить градиенты.
В заголовках обычно содержится текст, набранный крупным шрифтом, выделенный начертанием или цветом. К нему иногда прилагается описательный подзаголовок, изображения и кнопки призыва к действию.
1 — заголовок, 2 — описание, 3 — изображение, 4 — кнопки
Текст основного заголовка обозначается тегом h1 , его стилизацией мы и займёмся.
Полезные подсказки
Выбирайте правильные цвета
Если работаете с брендбуком, сосредоточьтесь на фирменных цветах. Если инструкций нет, сначала подберите сочетающиеся цвета, потом приступайте к оформлению.
Делайте заголовок уникальным
Тест и стиль должны быть уникальными. На одной веб-странице нужен только один тег h1 — это ради SEO и производительности, особенно если у заголовка сложный стиль.
Выбирайте правильные шрифты
Между визуальным хаосом и хорошим заголовком — тонкая грань, которую пересекают размер, цвет, начертание и гарнитура шрифта. Поэтому иногда творческие порывы надо притормаживать.
CSS градиенты цвета текста
Градиент — цветовой переход между цветами, при котором они смешиваются. Есть три способа добавить цветовые градиенты к тексту заголовка CSS:
1. linear-gradient()
Функция обеспечивает переход цвета по прямой линии. Сделаем для старта заголовок в HTML:
Используйте семантический тег header , как показано, тег section с ID или проверенный [div] с class=»header» . Главное, чтобы заголовок был заметным и узнаваемым.
Функция linear-gradient() позволяет добавлять специфические параметры, в том числе направление градиента и как минимум два значения цвета. Но можно добавлять больше — количество цветов не ограничено. Посмотрим на CSS:
Свойство background-clip гарантирует, что фон не выйдет за пределы элемента — в данном случае это текста. Свойство color установлено как transparent , так что фон видно прямо за заголовком. Результат кода: светлый цвет перетекает в тёмный слева направо:
Линейный градиент текста слева направо
Стилизовать заголовок с градиентом можно в других направлениях:
Линейные градиенты текста с разными направлениями
Градиент может быть и диагональным:
Направление можно указать с помощью углов:
Линейный градиент по диагонали
Начало перехода цвета можно задать, добавив процентное значение после первого цвета. Фиолетовый занимает 45% текста заголовка, а потом переходит в красный:
Линейный градиент с процентами
2. radial-gradient()
Радиальный градиент начинается в исходной точке, из которой расходятся цвета. По умолчанию переход цвета начинается из центра элемента.
Указать направление с помощью radial-gradient() нельзя, но зато можно указать форму: круг или эллипс.
Радиальный градиент
Для изменения положения градиента есть четыре параметра:
3. conic-gradient()
Этот градиент тоже начинается с исходной точки. Вокруг неё вращается цветовой переход. Для наглядности добавим к заголовку третий цвет.
Пример конического градиента
Грубую начальную точку, где бирюзовый переходит в фиолетовый на букве n, можно сгладить. Для этого добавим первый цвет в конец функции.
После цветов можно добавить процентные значения, чтобы контролировать точки начала цветовых переходов.
Функцию можно использовать, чтобы сделать градиент, который градиентом не будет.
Первый цвет перемещается от начальной точки 0% и проворачивается на 33% заголовка. В этой точке должен начаться цветовой переход, но начальная точка следующего цвета была 33%, поэтому цвет меняется сразу.
Бонус: повторяющиеся градиенты
Как можно понять, градиент цвета текста повторяется по всему заголовку. Добавим цветовые точки, получим градиентные узоры.
Даже если вы не собираетесь вызывать у пользователей головокружение, учитесь использовать градиенты.
Используйте оттенки одного цвета
Чтобы получить паттерн repeating-radia l, используем такой синтаксис:
Теперь поменяем красный на светло-фиолетовый:
Используйте не только оттенки одного цвета. Жёлтый хорошо сочетается с оранжевым, а зелёный — с синим.
Используйте правильные параметры
Помните четыре параметра для radial-gradient ? Посмотрим ещё.
Градиенту можно задать форму circle или ellipse . По умолчанию это ellipse с положением в центре.
Размер фигуры можно определить с помощью параметров:
closest-side — форму градиента определяет ближайшая к центру стороной элемента;
closest-corner — форму градиента определяет ближайший угол элемента;
farthest-side —форму градиента определяет сторона элемента, удалённая от центра;
farthest-corner — форму градиента определяет удалённый от центра угол.
Далее идёт позиция от corner или side . Это может быть процентное значение или длина.
Используйте минимум два цвета, но помните, что повторение первого в качестве третьего даёт плавный переход. Для ясности используем красный и фиолетовый:
Вот что получится при repeating-radial-gradient использовании значений closest- :
А теперь при использовании значений farthest- :
Между двумя первыми заголовками нет большой разницы, потому что градиент расходится из центра наружу. Тот же результат можем получить, используя linear-gradient . Лучше указать форму и определить точки цветовых переходов.
Видно, что свойство repeating-radial-gradient со значением closest-side или closest-corner выглядит ярче, но снижает читаемость, если использовать неподходящие цвета. Значения farthest-corner или farthest-side позволяют получить чёткий текст даже с контрастными цветами.
Текст с градиентом
Градиент в цвет шрифта можно добавить с помощью следующих CSS свойств:
- color: transparent; – задает прозрачный цвет шрифта.
- background-clip: text; – окрашивает текст в цвет или изображение указанного в background-image .
- background-image: linear-gradient или background-image: radial-gradient – задает градиент.
Свойство background-clip: text находится в стадии разработки и поддерживается некоторыми современными браузерами только с префиксом -webkit- .