Привет всем! Сегодня листал ленту новостей, и понял, что достаточно большое количество запросов посвящено теме: «Как создать градиентную тень с помощью CSS?». Стало интересно разобраться с этим вопросом самостоятельно 🙂

В качестве эксперимента — будем делать градиентную тень с помощью CSS для двух цветов: красный и синий.

.box {
box-shadow: 0 0 10px 5px rgba(128,0,128,0.5), 
0 0 20px 10px rgba(255,0,0,0.5);
}

В этом примере мы используем две тени: одна имеет начальный цвет фиолетовый (rgba(128,0,128,0.5)), а вторая имеет конечный цвет красный (rgba(255,0,0,0.5)). Первая тень имеет бОльший радиус (20px), чем вторая тень (10px) — это создает иллюзию градиента.

Пример создания градиентной тени с помощью CSS доступен по ссылке. И да — как всегда, в случае возникновения вопросов пишите на почту, или в Telegram.