Linear-gradient(): линейный градиент в фоне
Цветовой градиент — это плавный переход от одного заданного цвета к другому через промежуточные цвета. В линейном градиенте переход происходит по прямой, от точки A к точке B. Градиент может иметь и более двух опорных точек — тогда переход совершается от точки A к точке B, затем от точки B к точке C и так далее.
Как сделать фоновый линейный градиент в CSS
В CSS3 вы можете добавлять градиентный фон к элементам через уже известное свойство background-image . В качестве значения используется ключевое слово linear-gradient() , где в скобках необходимо указать стартовую точку градиента, начальный цвет и конечный цвет.
Например, давайте сделаем фоновый линейный градиент с переходом от фиолетового цвета к красному. При этом мы хотим, чтобы начальная точка с фиолетовым цветом была с правой стороны, а вектор градиента направлялся влево. Запишем код:
background-image: linear-gradient(to left, violet, red);
Цвета точек градиента можно записывать в любом формате, доступном в CSS, будь-то шестнадцатеричный код, формат RGB или другой. Направление градиента задается с помощью приставки to и затем ключевых слов left , right , top и bottom , которые можно комбинировать для изменения наклона. Например:
background-image: linear-gradient(to bottom right, #ee82ee, #ff0000);
Кроме этого, можно прямо указать угол наклона, использовав положительное либо отрицательное число с приставкой deg (без пробела). При заданном угле 0º либо 360º градиентная линия будет идти снизу вверх. При увеличении угла наклона движение вектора происходит по часовой стрелке (при использовании отрицательного значения движение меняется на противоположное). Пример записи кода:
background-image: linear-gradient(-110deg, #ee82ee, #ff0000);
Чтобы лучше понять поведение линейных градиентов, необходимо видеть их. Поэтому рекомендуем вам самостоятельно попрактиковаться после прочтения данного урока.
Несколько опорных точек
Как мы уже сказали, у градиента может быть более двух опорных точек. При этом фон будет плавно переходить от первого цвета ко второму, от второго к третьему, от третьего к четвертому и так далее, пока не достигнет финальной опорной точки. Если вы хотите увеличить количество данных точек в градиенте, просто допишите их через запятую. Например:
background-image: linear-gradient(145deg, #ee82ee, slateblue, #ffd86a, purple);
В нашем примере указаны четыре опорных цветовых точки, но их можно добавлять сколько угодно и в каких угодно доступных цветовых форматах.
Длина переходов
По умолчанию браузер размещает точки на равном расстоянии, поэтому и градация получается равномерной. Но этим расстоянием можно управлять, используя единицы измерения CSS. Давайте разберем следующий пример:
background-image: linear-gradient(#92009b 20%, #f5e944 90%, #00ffa2);
В нашем коде после цвета #92009b указано значение 20% . Поскольку оно стоит возле первой опорной точки, это означает, что указанным цветом будет закрашено 20% длины элемента. После чего уже начинается градиент: значение 90% говорит браузеру, что нужно достичь цвета #f5e944 к 90% длины элемента (начав на уровне 20%). После чего в оставшемся пространстве начинается переход к третьему цвету — #00ffa2 .
Эта тема также требует практики. Попробуйте создать градиентный фон с несколькими опорными точками (более двух), поиграться со значениями расстояний и понаблюдать за изменениями градиента в браузере.
Вендорные префиксы
Для обеспечения кроссбраузерности к некоторым поздним CSS-свойствам нужно дописывать вендорные префиксы — специальные приставки, которые добавляют разработчики браузеров:
- -webkit- — префикс для Chrome, Safari, Android;
- -moz- — префикс для Firefox;
- -o- — префикс для Opera.
Градиентный фон тоже требует использования данных префиксов, если есть необходимость в поддержке максимального количества браузеров. Для этого адаптируйте код следующим образом:
background-image: -webkit-linear-gradient(left, violet, red); background-image: -moz-linear-gradient(left, violet, red); background-image: -o-linear-gradient(left, violet, red); background-image: linear-gradient(to left, violet, red);
Для добавления префикса требуется создавать отдельное объявление. Кроме того, как вы могли заметить, свойства с вендорными префиксами не требуют использования приставки to при указании направления градиента.
Поддержка Internet Explorer
К сожалению, градиентный фон работает только в IE10+. Предыдущие версии не понимают его и будут игнорировать. Чтобы обеспечить хотя бы обычный фон в старых браузерах, можно создать т. н. «заглушку»: выберите подходящий оттенок и запишите свойство background-color над свойством с градиентом. Таким образом, старый браузер применит «резервный» фоновый цвет, а неизвестные ему свойства пропустит, тогда как в более современном браузере градиентный фон наложится на сплошной фон и перекроет его.
Если же у вас установлен полупрозрачный градиент (например, с использованием цветового формата RGBA) и вы не хотите, чтобы сквозь него просвечивался резервный фон-заглушка, задавайте градиент через сокращенное свойство background вместо background-image . Тогда значение background-color будет перезаписано на transparent .
Далее в учебнике: repeating-linear-gradient() — повторяющийся линейный градиент.
linear — gradient ( )
Функция для создания фона в виде градиента или повторяющегося паттерна.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
- Кратко
- Пример
- Как понять
- Как пишется
- Количество цветов
- Точки остановки цвета
- Направление градиента
- Повторяющийся градиент
- Множественные градиенты
- Денис Ежков советует
- Алёна Батицкая советует
Обновлено 20 декабря 2021
Кратко
Скопировать ссылку «Кратко» Скопировано
Функция linear — gradient используется для задания фона в виде линейного градиента.
Пример
Скопировать ссылку «Пример» Скопировано
.element background-image: linear-gradient(#6e4aff, #49A16C);>.element background-image: linear-gradient(#6e4aff, #49A16C); >Как понять
Скопировать ссылку «Как понять» Скопировано
Градиент — это плавный переход между цветами. Линейный градиент описывает изменение цвета вдоль прямой линии. В отличие от фоновых изображений градиент не может иметь конкретных размеров и его фактический размер совпадает с размером элемента.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Самый простой вид градиента — переход между двумя цветами:
.element background-image: linear-gradient(#2E9AFF, #F498AD);>.element background-image: linear-gradient(#2E9AFF, #F498AD); >
Мы можем задавать направление градиента, используя ключевые слова с приставкой to : to left , to top , to right , to bottom (по умолчанию). Значения имеют следующие эквиваленты в углах:
- to top — 0deg ;
- to bottom — 180deg ;
- to right — 90deg ;
- to left — 270deg ;
Ключевые слова можно сочетать, чтобы направить градиент в нужный угол элемента: to top left будет рисовать градиент из правого нижнего в левый верхний угол.
Повторяющийся градиент
Скопировать ссылку «Повторяющийся градиент» Скопировано
Если градиент должен многократно повторяться, можно использовать функцию repeating — linear — gradient ( ) .
Множественные градиенты
Скопировать ссылку «Множественные градиенты» Скопировано
Множественный фон элемента может применяться и к градиентам.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Градиент можно анимировать! ��
На практике
Скопировать ссылку «На практике» Скопировано
Денис Ежков советует
Скопировать ссылку «Денис Ежков советует» Скопировано
�� Используя возможность резких переходов между цветами, можно генерировать различные паттерны при помощи линейного градиента. Яркий пример — разлинованный под школьную тетрадь фон:
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Если нужно создать линейный градиент, уходящий в прозрачность, то вы неминуемо столкнётесь с проблемой в Safari и iOS. Во всех браузерах ключевое слово transparent отрабатывает ожидаемо, плавно уводя градиент в прозрачность. А в Safari и iOS из-за особенностей реализации именно этого ключевого слова градиент будет уходить в грязный чёрный.
.element background: linear-gradient(#F498AD 10%, transparent);>.element background: linear-gradient(#F498AD 10%, transparent); >Линейный градиент в Chrome, красиво растворяется
Ровно тот же самый градиент, но в Safari. Это вообще легально? ��
Решить этот баг можно довольно просто, хоть немного и больно. Нужно вместо ключевого слова transparent указать предыдущий цвет градиента, но с нулевой прозрачностью. Визуально итог будет тот же, и даже в Safari всё заработает.
.element background: linear-gradient(#F498AD 10%, rgb(244 152 173 / 0));>.element background: linear-gradient(#F498AD 10%, rgb(244 152 173 / 0)); >�� Статьи и сборники классных паттернов, созданных при помощи градиентов:
- CSS-паттерны
- CSS3 Patterns Gallery
- You Crazy? Patterns with CSS Gradients
CSS gradient генератор
Времена, когда сделать градиент на сайте можно было только с использованием картинок давно прошли. Теперь достаточно просто создавать градиенты внутри CSS стилей.
Для того, чтобы задать градиент используется свойство background-image или сокращенный вариант background-image . И мы можем создать как линейный так и радиальный градиент, прописав значения либо linear-gradient, либо radial-gradient и указав начальный и конечный цвета. Вот пример синтаксиса:
background: linear-gradient (#58b6b9, #edf1cf);
Поменять направление возможно, указав его вначале, перед первым цветом.
background: linear-gradient (to right, #94525c, #14aad7);
Если заменить этот параметр на to top right вы получите диагональный градиент. Такой же эффект можно создать, указав параметр в градусах, например, 45deg .
Вы можете использовать больше чем 2 цвета, и цвета можно записать в том числе и по названию.
background: linear-gradient (to right, #94525c, #14aad7, cyan);
Каждый из четырех цветов будет занимать равное количество доступного пространства, что даст нам гладкий и сбалансированный градиент.
Если мы хотим, чтобы один цвет занимал больше места, чем другой, можно добавить значение в процентах непосредственно после цвета. Потренируйтесь на градиент css генераторе выше.
background: linear-gradient (to right, #a3795f 50%, #012754);
Радиальный градиент
Используем все, что мы уже узнали ранее, чтобы создать радиальный градиент. На самом деле это довольно просто, достаточно в начале указать значение radial-gradient .
background: radial-gradient (#edf1cf, #43acb4);
Такой радиальный градиент принимает форму родительского блока, поэтому вместо круга мы получили эллипс. Чтобы градиент был в форме круга независимо от пропорций родителя, необходимо указать ключевое слово circle .
background: radial-gradient (circle, #5d1a78, #414b50);
К тому же мы можем указать где будет центр радиального градиента. Давайте сделаем так, чтобы он был в левом верхнем углу:
background: radial-gradient (circle at top left, #e1d767, #d3f6da);
Практическое использование CSS градиента
Давайте попробуем использовать градиент более оригинальным способом.
Градиент поверх картинки
Ниже вы видите пример слоя с градиентом поверх изображения. Здесь мы использовали полупрозрачные rgba цвета.
Свойство background может принимать сразу несколько значений. При этом первое будет верхним слоем, а последнее — нижним.
CSS div { background: linear-gradient(to right, rgba(75, 123, 211, 0.5), rgba(22, 215, 177, 0.3)), url('gradient.jpg'); }Мы получаем такой эффект:
Градиент в тексте
Градиент в тексте — это классный эффект, хотя и не полностью поддерживаемый в чистом виде. Вместо него мы используем свойство background-clip , это что-то вроде хака, но отлично работающего хака.
Возьмем элемент, в данном случае h1, и применим к нему градиент. Свойству background-clip присвоим значение text, это удалит фон из всего блока, за исключением текста. И, конечно же, следует сделать свойство color прозрачным, иначе мы не увидим градиент.
CSS div { background-image: linear-gradient(to right, #0cebeb, #20e3b2, #29ffc6); -webkit-background-clip: text; background-clip: text; color: transparent; }- Студия Профессиональная разработка сайтов под заказ Подробнее
- Иконки Прекрасный способ визуально выразить главную мысль Подробнее
- Сервисы Полезные инструменты для веб разработчиков Подробнее
- Блог Делимся в опытом и знанием в IT сфере Подробнее
- Поделиться ВконтактеFacebook Контакты support@active-vision.ru
© 2019 — 2024 Active-Vision. Политика конфиденциальности. Вся информация на сайте носит справочный характер и не является публичной офертой, определяемой статьей 437 ГК РФ
Как сделать градиент фона в css
Градиентный фон можно устанавливать в свойствах background и background-image, но, для экономии места, все примеры будут записаны в обобщенном свойстве background. Значение которое принимает свойство background может быть одним из:
linear-gradient(), линейный градиент, создается с помощью двух и более цветов, для которых задано направление, или линия градиента.
body /* необходимо задать высоту блока */ height: 100vh; /* зальем body документа градиентом из 3 цветов, начало градиента - нижний левый угол*/ background: linear-gradient(45deg, #4158D0 0%, #4158D0 30%, #C850C0 30%, #C850C0 60%, #FFCC70 60%, #FFCC70 100%); >Для чёткого распределения цветных полос каждый последующий цвет нужно начинать с точки остановки предыдущего цвета. Тогда и границы градиента будут четкие, без плавного перехода.
body /* необходимо задать высоту блока */ height: 100vh; /* зальем body документа градиентом из 3 цветов, начало градиента - нижний левый угол*/ background: linear-gradient(45deg, #4158D0 35%, #C850C0 35%, #C850C0 65%, #FFCC70 65%, #FFCC70 100%); >radial-gradient(), радиальный (круговой) градиент, отличается от линейного тем, что цвета выходят из одной точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга или эллипса.
body /* необходимо задать высоту блока */ height: 100vh; /* зальем body документа градиентом из 2 цветов, начало градиента - центр страницы*/ background: radial-gradient(#4158d0, #c850c0); >Используя в градиентах прозрачный цвет, можно создавать эффекты размытий или «боке».
repeating-linear-gradient() или repeating-radial-gradient() — вышеуказанные варианты только с функцией повтора, чаще всего с помощью этих вариантов создают полосатые узоры.
body /* необходимо задать высоту блока */ height: 100vh; /* зальем body документа градиентом из 2 цветов, начало градиента - центр страницы*/ background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); >