Как сделать градиент в css

Как сделать градиентный фон на веб-странице?

Для создания градиентов предназначена функция linear-gradient(), которая добавляется к свойству background или background-image.

background: linear-gradient(#9A5044, #E8D9A9);

Без указания дополнительных параметров градиент получается вертикальным, первое значение указывает цвет сверху, второе — снизу. Браузер уже сам делает плавный переход между указанными цветами.

Чтобы сделать градиент в виде фона веб-страницы, background с linear-gradient() следует добавить к селектору body . Однако такой фон привязан к высоте содержимого и если оно меньше высоты веб-страницы, то результат получается так себе (рис. 1).

Рис. 1. Вид градиента

Такое можно избежать, если к background добавить параметр fixed , тогда высота градиента будет совпадать с высотой веб-страницы, а при прокрутке содержимого градиент остаётся неподвижным (пример 1).

Пример 1. Градиентный фон

Результат данного примера показан на рис. 2. Для наглядности добавлен высокий белый блок, показывающий что при прокрутке веб-страницы градиент не меняется.

Рис. 2. Вид веб-страницы с градиентным фоном

См. также

• linear-gradient()
• Градиенты в CSS
• Градиенты у
• Линейный градиент
• Оформление кнопок
• Установка фона и градиента

Градиенты в CSS

Когда мы говорим о градиентах в CSS, мы говорим о цветных градиентах.

В CSS существует два типа градиентов:

• линейные: цвета идут от одной точки к другой, по прямой линии;
• радиальные: цвета идут от центра круга к его краям, во всех направлениях.

Градиент считается фоновым изображением и должен использоваться с соответствующим свойством.

linear-gradient

Синтаксис для линейных градиентов является довольно сложным, но основная идея заключается в следующем:

• определить желаемые цвета;
• где эти цвета должны появиться вдоль оси (в начале, середине, конце и т. д.);
• в каком направлении должен идти градиент.

Давайте начнём с простого градиента из двух цветов:

Простой вертикальный фоновый градиент.

Изменение направления

Если направление сверху вниз вам не подходит, вы можете поменять его на один из вариантов:

• определить назначение градиента, с помощью таких ключевых слов, как to left top ;
• определить конкретный угол в градусах, вроде 45deg .

Это направление должно быть установлено перед цветом:

Диагональный градиент от левого верхнего угла в правый нижний угол.

Если вы хотите задать конкретный угол, то можете использовать значение в градусах:

• 0deg — снизу вверх;
• 20deg — немного по диагонали, идущей по часовой стрелке;
• 90deg — подобно 15 часам, слева направо;
• 180deg — это значение по умолчанию, сверху вниз.

Диагональный градиент с углом 20 градусов.

Добавление большего количества цветов

Вы можете вставить столько цветов, сколько захотите. Они будут равномерно распределены вдоль оси:

• два цвета: 0% и 100%
• три цвета: 0%, 50% и 100%
• четыре цвета: 0%, 33%, 67% и 100%

Довольно некрасивый градиент, но тут важна идея.

Определение конкретных точек цвета

Если вы не хотите, чтобы цвет распределялся равномерно, то можете установить определённые позиции цвета, используя либо проценты (%), либо пиксели (px):

Тоже уродливый градиент, но тут важна идея.

В данных параметрах:

• у цвета orange не задана позиция цвета, так что значение по умолчанию равно 0%;
• цвет grey ближе к верху, на 10% вместо 50%;
• цвет yellow занимает половину градиента, от 50% и до конца 100%.

radial-gradient

В то время как линейные градиенты идут вдоль одиночной оси, радиальные градиенты распространяются во всех направлениях. Их синтаксис очень похож на линейные градиенты, поскольку у тех и других есть точки цвета. Но вместо указания направления вам необходимо задать:

• форму: круг или эллипс;
• начальную точку: которая будет центром круга или эллипса;
• конечную точку: где будет край круга или эллипса.

Это очень похоже на солнце, не так ли?

• градиент является эллипсом;
• первый цвет начинается в центре;
• последний цвет заканчивается в самом дальнем углу.

Начальная позиция

Начальная позиция работает как background-position. Вы можете установить её через ключевое слово at .

Мрачный день.

Конечная позиция

По умолчанию форма завершается в самом дальнем углу. Вы можете выбрать:

• closest-side
• closest-corner
• farthest-side
• farthest-corner

Разница одновременно трудна для понимания и представления, поэтому я не буду вдаваться в подробности. У Mozilla есть хорошее описание различных значений.

div < background-image: radial-gradient(closest-corner at 20px 20px, green, blue); padding: 1rem; width: 300px; >div:hover

Наведите указатель мыши на эту зелёную звезду в небе, чтобы увидеть как она расширяется.

Фиксированный размер

Вместо установки начальной и конечной позиций, вы можете просто задать конкретные размеры:

Небольшой фиолетовый диск в море розового цвета.

Градиенты в CSS являются мощным средством, учитывая бесконечное число вариантов.

Примеры на этой странице умышленно сделаны «некрасивыми», с ярко выраженными различиями цветов, чтобы лучше объяснить, как работает каждое свойство.

Но довольно легко писать едва уловимые градиенты, особенно для кнопок:

.button-grey < background-image: linear-gradient(#f2f2f2, #f2f2f2); >.button-yellow < background-image: linear-gradient(#fce374, #fcdf5b); >.button-orange < background-image: linear-gradient(#f58a38, #f57c20); >.button-red < background-image: linear-gradient(#ed6d64, #ed574c); >.button-purple < background-image: linear-gradient(#847bba, #7568ba); >.button-blue < background-image: linear-gradient(#42b0e3, #2ba9e3); >.button-green

linear — gradient ( )

Функция для создания фона в виде градиента или повторяющегося паттерна.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

1. Кратко
2. Пример
3. Как понять
4. Как пишется
   1. Количество цветов
   2. Точки остановки цвета
   3. Направление градиента
   4. Повторяющийся градиент
   5. Множественные градиенты
   1. Денис Ежков советует
   2. Алёна Батицкая советует

   Обновлено 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

   2.16. CSS-градиент

   

   CSS-градиент представляет собой переходы от одного цвета к другому.

   Градиенты создаются с помощью функций linear-gradient() и radial-gradient() .

   Градиентный фон можно устанавливать в свойствах background , background-image , border-image и list-style-image .

   Как сделать градиент в CSS

   • Содержание:
   • 1. Линейный градиент: linear-gradient()
   • 2. Радиальный градиент: radial-gradient()
   • 3. Повтор градиента: repeating-linear-gradient() и repeating-radial-gradient()
   • 4. Кроссбраузерный градиент
   • 5. Комбинация градиента и фонового изображения

   Поддержка браузерами

   IE: 10.0
   Firefox: 16, 3.6 -moz-
   Chrome: 26.0, 10.0 -webkit-
   Safari: 6.1, 5.1 -webkit-
   Opera: 12.1, 11.1 -o-
   iOS Safari: 7.1
   Opera Mini: —
   Android Browser: 4.4, 4.1 -webkit-
   Chrome for Android: 44

   1. Линейный градиент linear-gradient()

   

   Линейный градиент создается с помощью двух и более цветов, для которых задано направление, или линия градиента.

   Если направление не указано, используется значение по умолчанию — сверху-вниз.

   Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.

   background: linear-gradient(угол / сторона или угол наклона с помощью ключевого слова (пары ключевых слов), первый цвет, второй цвет и т.д.); 

   Направление градиента может быть задано двумя способами:
   с помощью угла наклона в градусах deg , значение которого определяет угол наклона линии внутри элемента.

   с помощью ключевых слов to top , to right , to bottom , to left , которые соответствуют углу градиента, равному 0deg , 90deg , 180deg и 270deg соответственно.

   Если направление задано парой ключевых слов, например, to top left , то начальная точка градиента будет расположена в противоположном направлении, в данном случае справа внизу.

   Для неравномерного распределения цветов указывается начальная позиция каждого цвета через точки остановки градиента, так называемые color stops. Точки остановки задаются в % , где 0% — начальная точка, 100% — конечная точка, например:

   Для чёткого распределения цветных полос каждый последующий цвет нужно начинать с точки остановки предыдущего цвета:

   2. Радиальный градиент radial-gradient()

   Радиальный градиент отличается от линейного тем, что цвета выходят из одной точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга или эллипса.

   background: radial-gradient(форма градиента / размер / позиция центра, первый цвет, второй цвет и т.д.); 

   Форма градиента определяется ключевыми словами circle или ellipse . Если форма не задана, по умолчанию радиальный градиент принимает форму эллипса.

   Позиция центра задаётся с помощью ключевых слов, используемых в свойстве background-position , с добавлением приставки at . Если позиция центра не задана, используется значение по умолчанию at center .

   С помощью пары значений, указанных в единицах длины % , em или px , можно управлять размером эллипсообразного градиента. Первое значение задает ширину эллипса, второе — высоту.

   Размер градиента задаётся с помощью ключевых слов. Значение по умолчанию farthest-corner (к дальнему углу).

   Значение	Описание
   closest-side	Размер градиента рассчитывается из расстояния до любой ближней стороны блока для circle или до ближних сторон по X и по У для ellipse .
   farthest-side	Размер рассчитывается из расстояния до дальних сторон.
   closest-corner	Размер рассчитывается из расстояния до ближних углов.
   farthest-corner	Размер рассчитывается из расстояния до дальних углов.

   С помощью радиального градиента можно создавать реалистичные объёмные фигуры, такие как мячи, кнопки.

   Мяч

   Кнопка

   .wrap < height: 200px; padding: 50px 0; background: #cccccc; >.button

   Почтовая марка

   

   Используя в градиентах прозрачный цвет, можно создавать вот такие эффекты.

   .container < background: #B7D1D8; padding: 25px; >.wrap < background: radial-gradient(transparent, transparent 4px, white 4px,white); padding: 10px; width: 300px; height: 220px; background-size: 20px 20px; background-position: -10px -10px; /*обрезаем узор по краю*/ margin: 0 auto; >img

   3. Повтор градиента

   В добавление к линейному и радиальному градиентам существует повтор градиента, который задается с помощью функций repeating-linear-gradient() и repeating-radial-gradient() соответственно. Фон из повторяющихся градиентов выглядит неаккуратно, поэтому рекомендуется начинать следующий цвет с точки остановки предыдущего, создавая таким образом полосатые узоры.

   4. Кроссбраузерный градиент

   Для корректного отображения градиентов во всех браузерах необходимо добавить кроссбраузерную запись.

   Линейный градиент

   -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)"; /* IE 8-9 */ background: -webkit-linear-gradient(left, red, #f06d06); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */ background: -moz-linear-gradient(left, red, #f06d06); /* Firefox 3.6-15 */ background: -o-linear-gradient(left, red, #f06d06); /* Opera 11.1-12 */ background: linear-gradient(to right, red, #f06d06); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */

   Повтор линейного градиента

   background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */ background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1-12.0 */ background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6-15 */ background: repeating-linear-gradient(red, yellow 10%, green 20%); /* Стандартный синтаксис */

   Радиальный градиент

   background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1-6.0 */ background: -o-radial-gradient(red, yellow, green); /* Opera 11.6-12.0 */ background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6-15 */ background: radial-gradient(red, yellow, green); /* Стандартный синтаксис */ background: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Safari 5.1-6.0 */ background: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Opera 11.6-12.0 */ background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Firefox 3.6-15 */ background: radial-gradient(farthest-side at 60% 55%, red, yellow, black); /* Стандартный синтаксис */

   Повтор радиального градиента

   background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1-6.0 */ background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6-12.0 */ background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6-15 */ background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Стандартный синтаксис */

   5. Комбинация градиента и фонового изображения

   За счёт комбинации градиента и изображения можно создавать интересные эффекты. Для градиента нужно использовать полупрозрачные цвета, чтобы картинка оставалась видимой.

   Читать:

   No vbmeta samsung что это