Задать цвет фона градиент html. Градиенты в CSS

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

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

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

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

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

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

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

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

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

400×400px

Цвета точек градиента можно записывать в любом формате, доступном в 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-градиенты без картинок

Предположим, что мы хотим сделать градиентный переход в фоне от серого к черному. Для этого корпорация W3 предложила в CSS3 использовать специальную директиву linear-gradient.

Итак, по версии W3 для того, чтобы сделать градиентный фон достаточно написать в селекторе блока:

Background: linear-gradient(start, color1 position1, color2 position2,...,colorN positionN);

И браузер самостоятельно прорисует градиентный фон в блоке.

Очевидно, что цветов и контрольных точек в градиенте может быть много. Параметр start указывает в каком направлении должен распространяться градиент - это может быть или top для вертикально-направленного градиента или left для горизонтально-направленного.

Не все браузеры поддерживают такую фишку, поэтому пока существует ряд ухищрений. Для совсем старых браузеров нужно либо указывать какой-то средний цвет фона (градиента не будет вовсе, но фон не будет белым), или указывать картинку с градиентом (правда, если цель использования linear-gradient на CSS - это сокращение количества загружаемых картинок, то это бесполензно, потому, что во всех браузерах картинка все-равно подгрузится, хоть и будет потом заменена на linear-gradient).
Для IE-подобных браузеров можно использовать градиенты, основанные на фильтрах, а для браузеров на webkit (Safari, Chrome) и gecko (Mozilla), как всегда существует альтернатива: -webkit-gradient и -moz-linear-gradient, которые принимают похожие параметры. Как это всё должно работать смотрите в следующем код-блоке:

Background: #999; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#000000"); background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); background: -moz-linear-gradient(top, #ccc, #000);

После рендеринга это выглядит вот так.

Последнее обновление: 21.04.2016

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

Градиенты в CSS не представляют какого-то специального свойства. Они лишь создают значение, которое присваивается свойству background-image .

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

Для создания градиента нужно указать его начало и несколько цветов, например:

Background-image: linear-gradient(left,black,white);

В данном случае началом градиента будет левый край элемента, который обозначается значением left . Цвета градиента: черный (black) и белый (white). То есть начиная с левого края элемента до правого будет плавно идти переход из черного цвета в белый.

В использовании градиентов есть один недостаток - многообразие браузеров вынуждает использовать префикс вендора:

Webkit- /* Для Google Chrome, Safari, Microsoft Edge, Opera выше 15 версии */ -moz- /* Для Mozilla Firefox */ -o- /* Для Opera старше 15 версии (Opera 12) */

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

Для установки начала градиента можно использовать следующие значения: left (слева направо), right (справа налево), top (сверху вниз) или bottom (снизу вверх). Например, вертикальный градиент будет выглядеть следующим образом:

Background-image: linear-gradient(bottom,black,white);

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

Background-image: linear-gradient(top left,black,white);

Кроме конкретных значений типа top или left также можно указать угол от 0 до 360, который определит направление градиента:

Background-image: linear-gradient(30deg,black,white);

После величины углы указывается слово deg .

К примеру, 0deg означает, что градиент начинается в левой части и перемещается в правую часть, а при указании 45deg он начинается в нижнем левом углу и перемещается под углом 45° в верхний правый угол.

После определения начала градиента, можно указать применяемых цветов или опрные точки. Цветов не обязательно должно быть два, их может быть и больше:

Background-image: linear-gradient(top, red, #ccc, blue);

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

Background-image: linear-gradient(left, #ccc, red 20%, red 80%, #ccc);

Повторяющийся градиент

С помощью repeating-linear-gradient можно создавать повторяющиеся линейные градиенты. Например:

Background-image: repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px); background-image: -moz-repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px); background-image: -webkit-repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px);

В данном случае градиент начинается с левого края элемента с полоски серого цвета (#ccc) шириной 20 пикселей, далее до 30 пикселей идет переход к красному цвету, а затем до 40 пикселей выполняется обратный переход к светло-синему цвету (rgba(0, 0, 126, .5)). После этого браузер повторяет градиент, пока не заполнит всю поверхность элемента.

Красный

Зеленый

Синий

Красный

Зеленый

Синий

Готовый код градиента css

Параметры градиент css генератора оналайн

1. Левый цвет градиента . Подбираем у блока в левой части цвет любых оттенков с помощью сочетания красного, зеленого и синего цвета.
2. Правый цвет градиента . Выбираем оттенок цвета справа.
3. Уровень между градиентами . Расстояние от левой части блока где начнется градиент.
4. Размытие градиента . Смешивание двух цветов от уровня между цветами.
5. Угол границы градиента . Направление линии для равномерного изменения цвета от 0 до 365 градусов.

Все свойства градиент css

Градиент css накладывается на элементы в lending page такие как

• Градиент кнопки для украшения лендинга.
• Задний css градиент фона секции.
• Градиент картинки css с прозрачностью.
• Css градиент текста большого заголовка.

Создадим простой элемент в теге див с классом grad. Чтобы наложить градиент на класс grad зададим контур с шириной и высотой в файле стилей css. После этого можно добавить свойство градиента, который получился в генераторе градиента css. Gradient задается в свойстве background , затем пишем префикс webkit linear gradient для корректного отображения в разных интернет браузерах. Во вторых пишем какого вида будет градиент , выбираем из трех.

1. Линейный градиент css . Состоит из двух или больше цветов. Цвет изменяется от одного к другому равномерно по линии, с заданием угла.
2. Радиальный градиент . Цвет от одного к другому распределяется равномерно в форме круга, внутри элемента.
3. Повторяющийся градиент со свойством repeating. Подходит к линейному и радиальному.

градиент css примеры

Разберем на примерах все виды градиентов.

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

У linear gradient угол наклона задается параметром deg или ключами

Gradient1 {
background: linear-gradient(45deg, Aquamarine, GreenYellow);
}

Gradient2 {
background: linear-gradient(to top left, Fuchsia, MidnightBlue);
}

Gradient3 {
background: linear-gradient(to top, SaddleBrown 20%, OrangeRed 50%, Goldenrod 80%);
}

Gradient4 {
background: linear-gradient(to right, LightBlue 20%, LightGreen 20%, Thistle 80%, Wheat 80%);
}

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

Gradient5 {
background: radial-gradient(LightCoral , PapayaWhip);
}

С помощью ключа at задаем точку начала радиального градиента.

Gradient6 {
background: radial-gradient(at top, Turquoise, Azure);
}

Задаем размеры элипса в процентах

1. Первое значение ширина .
2. Второе высота элипса.

Gradient7 {
background: radial-gradient(40% 50%, MediumPurple, SeaShell);
}

Используем ключ farthest-corner для выставления размера градиента до дальнего угла.

Gradient8 {
background: radial-gradient(circle farthest-corner at 100px 50px, Yellow, DimGray);
}

Чтобы градиент стал круглым пишем ключ circle , по умолчанию он в виде ellipse.

Gradient9 {
background: radial-gradient(circle at 70% 10%, LightCyan, Magenta);
}

3). repeating-linear-gradient или repeating-radial-gradient повторяющийся градиент css

Gradient10 {
background: repeating-radial-gradient(circle, MediumSpringGreen, MediumSpringGreen 15px, Pink 15px, Pink 30px);
}

Gradient11 {
background: repeating-linear-gradient(45deg, #606dbc, #606dbc 20px, #465298 10px, #465298 20px);
}