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

Как сделать градиент фона в 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); > 

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

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

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

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

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

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

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

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

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

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

См. также

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

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() — повторяющийся линейный градиент.

Градиенты в 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