Здравствуйте, в данной статье с помощью CSS мы будем создавать разнообразные линейнын и радиальные градиенты.

Скачать исходники для статьи можно ниже

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

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

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

Основной синтаксис для этого является:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Линейный градиент сверху вниз

В данном примере линейный градиент переходит от зеленого цвета (сверху) к желтому (снизу):

Html код:

<div id="grad1">
Градиент1
</div>

CSSкод:

#grad1 {
height: 200px;
background: linear-gradient(green, yellow);
}

Линейный градиент слева направо

В следующем примере линейный градиент переходит от синего цвета (слева) к фиолетовому (справа):

Html код:

<div id="grad2">
Градиент2
</div>

CSSкод:

#grad2 {
height: 200px;
background: linear-gradient(to right, blue , violet);
}

Линейный градиент по диагонали

Для того, чтобы сделать переход цвета в градиенте по диагонали, нужно задать ему угол (-45deg) или направление (to bottom, to top, to left, to right, to bottom left и др).

Html код:

<div id="grad3">
Градиент3
</div>

CSSкод:

#grad3 {
height: 200px;
background: linear-gradient(-45deg, red, yellow);
}

Линейный градиент с несколькими цветовыми узлами

В приведенном ниже примере используется три цветовых узла (красный – red, желтый – yellow и зеленый – green). По умолчанию они распределены равномерно. Однако, если вы хотите определить интервал, просто введите процент после каждого цвета (например, red 10%, green 85%, blue 90%).

Html код:

<div id="grad4">
Градиент4
</div>

CSSкод:

#grad4 {
background: linear-gradient(red, yellow, green);
}

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

Все ранее упомянутые линейные градиенты могут быть сделаны повторяющимися с помощью функции repeating-linear-gradient():

Html код:

<div id="grad5">
Градиент5
</div>

CSSкод:

#grad5 {
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

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

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

Основной синтаксис для этого следующий:

background: radial-gradient(shape size at position, start-color, ..., last-color);

Как и в случае с линейным градиентом, по умолчанию в радиальных градиентах интервал образует равномерно расположенные эллипсы, но вы можете указать форму (например, эллипс или круг), а также интервал в процентах (например: red 5%, yellow 15%, green 60%).

Html код:

<div id="grad6">
Градиент6
</div>

CSSкод:

#grad6 {
background: radial-gradient(red, yellow, green);
}

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

Все ранее упомянутые радиальные градиенты могут быть сделаны повторяющимися с помощью функции repeating-radial-gradient():

Html код:

<div id="grad7">
Градиент7
</div>

CSSкод:

#grad7 {
height: 200px;
width: 300px;
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Прозрачные Градиенты

Вы также можете использовать CSS3 для создания прозрачных градиентов, используя функцию rgba (), к тому же её можно применить к любому градиенту описанному выше.
Функция rgba () использует значения от 0 до 1, где 0 означает полную прозрачность, в то время как 1 означает полный цвет или нулевую прозрачность.

Html код:

<div id="grad8">
Градиент8
</div>

CSSкод:

#grad8 {
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

В приведенном выше примере градиент начинается от полностью прозрачного к полностью красному.