Сегодня хочу поделиться небольшим сниппетом, который позволит с помощью всего нескольких строк CSS создать простой градиент без лишней графики. Для этого мы используем свойство box-shadow. С небольшой хитростью мы сможем применить его для имитаций плавного градиента. Далее код с примером.
Создадим небольшой div-контейнер с фиксированным размером.
<div class="gradient"></div>Теперь создадим класс «gradient» для заполнения нашего контейнера градиентом. Свойство box-shadow предназначено для создания тени блока, но мы воспользуемся им немного иначе.
При указаний параметра inset у нас получится внутренняя тень. Зальем весь контейнер одним цветом, а в качестве второго цвета градиента используем нашу “тень”.
Получается такой класс:
.gradient {
background: #57e15f;
box-shadow: inset 0 200px 200px -100px #255f29;
-webkit-box-shadow: inset 0 200px 200px -100px #255f29;
-moz-box-shadow: inset 0 200px 200px -100px #255f29;
display:block;
width: 100%;
height: 200px;
}Результат:
ArtsLab
Создание градиента с помощью CSS
Поиграться с кодом примера можно на Codepen