Как создать градиентную тень с помощью CSS

Как создать градиентную тень с помощью CSS?

Привет всем! Сегодня листал ленту новостей, и понял, что достаточно большое количество запросов посвящено теме: «Как создать градиентную тень с помощью 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.

Support the Blog!

Running a blog takes a lot of effort, time, and passion. Your donations help improve the content, inspire new ideas, and keep the project going.
If you’ve enjoyed the blog’s materials, any support would mean the world to me. Thank you for being here! ❤️

PayPal Logo Donate via PayPal

Revolut Logo Donate via Revolut