Тени, которые стесняются быть серыми: Colored Shadow Penumbra

Дизайнеры, у которых чешутся руки добавить в макет цветные тени, но мозг говорит «это же нереалистично», — держитесь. Colored Shadow Penumbra — это техника, которая позволяет создавать цветные тени с плавным переходом (penumbra) без единой строчки JavaScript. Только CSS, только хардкор.

Как это работает? Всё строится на псевдоэлементах и градиентах: вы накладываете тени с разными цветами и размытием друг на друга, создавая эффект цветной полутени. Звучит как колдовство, но на деле — просто аккуратная работа с filter: blur() и mix-blend-mode. Никаких хаков с SVG или canvas.

Конечно, можно было бы просто натянуть PNG-картинку, но где тогда челлендж? Этот метод даёт гибкость: меняешь цвет — тень перекрашивается автоматически, как хамелеон на дискотеке. Правда, с производительностью придётся дружить — если навесить на каждый div по три тени, браузер может начать подтормаживать. Но для акцентных элементов — самое то.

Пример использования

.shadow::after {
  content: '';
  position: absolute;
  width: 100%; height: 100%;
  background: linear-gradient(45deg, red, blue);
  filter: blur(20px);
  opacity: 0.5;
  z-index: -1;
}

Теперь ваш блок отбрасывает фиолетово-красную тень, будто его подсвечивает неоновая вывеска. Идеально для лендингов, игровых интерфейсов или просто чтобы позлить пуристов.

Комментарий студии METABYTE: Тени — это, конечно, хорошо, но не забывайте про accessibility: если текст на цветной тени читается с трудом, пользователь просто закроет вкладку быстрее, чем вы успеете сказать «CSS is awesome».