Градиенты в CSS

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

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

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

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

linear-gradient

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

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

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

CSS

div { background-image: linear-gradient(red, blue); }

HTML

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

По умолчанию:

• направление вертикальное, сверху вниз;
• первый цвет в начале (вверху);
• второй цвет в конце (внизу).

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

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

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

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

CSS

div { 
 background-image: linear-gradient(to bottom right, yellow, purple); 
 width: 200px; 
}

HTML

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

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

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

CSS

div { 
 background-image: linear-gradient(20deg, green, blue); 
 width: 150px; 
}

HTML

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

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

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

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

CSS

div { 
 background-image: linear-gradient(orange, grey, yellow);
 width: 150px; 
}

HTML

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

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

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

CSS

div { 
 background-image: linear-gradient(orange, grey 10%, yellow 50%);
 width: 150px; 
}

HTML

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

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

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

radial-gradient

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

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

CSS

div { 
 background-image: radial-gradient(red, yellow);
 padding: 1rem; 
 width: 300px; 
}

HTML

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

По умолчанию:

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

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

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

CSS

div { 
 background-image: radial-gradient(at top right, black, lightgrey);
 padding: 1rem; 
 width: 300px; 
}

HTML

<div>Мрачный день.</div>

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

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

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

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

CSS

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

HTML

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

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

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

CSS

div { 
 background-image: radial-gradient(20px 10px at 75% 50%, darkviolet, pink); 
 padding: 1rem;
 width: 300px; 
}

HTML

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

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

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

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

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 { background-image: linear-gradient(#97cc76, #8bcc62); }

Перейти к заданиям