5 видов градиента
1. Линейный градиент
Линейный градиент можно указать через свойство background: linear-gradient()
.
.gradient {
background: linear-gradient(red, green, blue);
}
Также можно указывать размер градиента:
.gradient {
background: linear-gradient(red 10%, green 80%, blue);
}
Линейный градиент
Линейный градиент с указанной длиной
2. Радиальный градиент
Радиальный градиент можно указать через свойство background: radial-gradient()
.
.radial-gradient {
background: radial-gradient(red, green);
}
Примеры радиального градиента:
Радиальный градиент
Радиальный градиент с указанной длиной
Также можно указать размер радиального градиента и отступы в первом параметре свойства background: radial-gradient()
.
.radial-gradient {
background: radial-gradient(200px at 100% 10px, red, green, blue);
}
Радиальный градиент с указанным размером и размером
3. Горизонтальный градиент
Чтобы сделать направление градиента слева направо, надо в начале указать параметр to right
.
.gorizontal-gradient {
background: linear-gradient(90deg, red, blue); /* 1-ый способ */
background: linear-gradient(to right, red, blue); /* 2-ой способ */
}
Горизонтальный градиент
4. Повторяющийся градиент
Повторяющийся градиент можно сделать через свойство repeating-linear-gradient()
.
.radial-gradient {
background-image: repeating-linear-gradient(-45deg, lightgreen 0, lightgreen 25px, green 25px, green 50px);
}
5. Повторяющийся радиальный градиент
Через свойство repeating-radial-gradient
можно установить повторяющийся радиальный градиент:
.radial-gradient {
background-image: repeating-radial-gradient(circle at center, #ffffff 0, #ffffff 10px, #5fe340 10px, #5fe340 20px);
}
Поддержать автора
Все статьи создаются и поддерживаются одним человеком,
если вам нравится контент, вы можете поддержать автора сайта