Линейный градиент CSS · Вертикальные полосы
Линейный градиент в виде 10 вертикальных полос с эффектом затемнения, используется linear-gradient - CSS, может быть задействован любой цвет.
Установка градиента CSS
Установка градиента для всей страницы
body {
background:
linear-gradient(90deg,transparent 10%,rgba(0,0,0,0.1) 10%),
linear-gradient(90deg,transparent 20%,rgba(0,0,0,0.1) 20%),
linear-gradient(90deg,transparent 30%,rgba(0,0,0,0.1) 30%),
linear-gradient(90deg,transparent 40%,rgba(0,0,0,0.1) 40%),
linear-gradient(90deg,transparent 50%,rgba(0,0,0,0.1) 50%),
linear-gradient(90deg,transparent 60%,rgba(0,0,0,0.1) 60%),
linear-gradient(90deg,transparent 70%,rgba(0,0,0,0.1) 70%),
linear-gradient(90deg,transparent 80%,rgba(0,0,0,0.1) 80%),
linear-gradient(90deg,transparent 90%,rgba(0,0,0,0.1) 90%),
linear-gradient(90deg,transparent 100%,rgba(0,0,0,0.1) 100%)
grey
}
Установка градиента для блока
<style>
.block-gradient{
width:100%;
height:320px;
background:
linear-gradient(90deg,transparent 10%,rgba(0,0,0,0.1) 10%),
linear-gradient(90deg,transparent 20%,rgba(0,0,0,0.1) 20%),
linear-gradient(90deg,transparent 30%,rgba(0,0,0,0.1) 30%),
linear-gradient(90deg,transparent 40%,rgba(0,0,0,0.1) 40%),
linear-gradient(90deg,transparent 50%,rgba(0,0,0,0.1) 50%),
linear-gradient(90deg,transparent 60%,rgba(0,0,0,0.1) 60%),
linear-gradient(90deg,transparent 70%,rgba(0,0,0,0.1) 70%),
linear-gradient(90deg,transparent 80%,rgba(0,0,0,0.1) 80%),
linear-gradient(90deg,transparent 90%,rgba(0,0,0,0.1) 90%),
linear-gradient(90deg,transparent 100%,rgba(0,0,0,0.1) 100%)
grey
}
</style>
<div class="block-gradient"></div>
Параметры градиента
- Тип градиента
linear-gradient - Линейный градиент- Используемые свойства
background - Свойство применения- Используемые цвета
transparent - прозрачный
rgba(0,0,0,0.1)
grey - измените на любой
Испытание градиента