Красивые тени CSS

3 шага для создания теней CSS, которые отлично смотрятся на любом фоне.

В этом уроке мы создадим великолепную тень CSS, применив несколько эффектов к свойству box-shadow.

Для создания теней, которые отлично смотрятся на любом фоне, нам понадобится:

1. Внутреннее свечение: вставка, светлая тень, делающая объект видимым в темном режиме.
2. Кольцо теней: разброс 1px, тень размытия 0px с более низкой непрозрачностью, что делает светлые объекты видимыми на белом фоне.
3. Множественные мягкие тени: серия мягких теней с постепенно увеличивающимися значениями «Y» и «размытие».

.component {
              /* inner glow 👇 */
  box-shadow: inset 0 0 0.5px 1px hsla(0, 0%,  
              100%, 0.075),
              /* shadow ring 👇 */
              0 0 0 1px hsla(0, 0%, 0%, 0.05),
              /* multiple soft shadows 👇 */
              0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
              0 0.9px 1.5px hsla(0, 0%, 0%, 0.045),
              0 3.5px 6px hsla(0, 0%, 0%, 0.09);
}

Живая демонстрация:

В приведенном выше примере мы устанавливаем цвет объекта (фона) светлее в темном режиме, чтобы увеличить его «возвышение» и улучшить внешний вид.

Надеюсь Вам понравилась!

---

Автор Целовальников Сергей