Настройте тень элемента и получите готовое свойство box-shadow.
box-shadow: 0px 8px 24px 0px #1018281f;Свойство box-shadow добавляет элементу тень: задаются смещение по X и Y, размытие, разброс и цвет. Тени создают ощущение глубины — приподнимают карточки, кнопки и модальные окна над фоном. Инструмент собирает значение визуально и показывает результат вживую.
Естественная тень обычно мягкая и полупрозрачная: небольшое смещение вниз, заметное размытие и чёрный цвет с низкой прозрачностью. Несколько теней через запятую дают более реалистичный эффект слоистости. Готовый CSS копируется одной кнопкой.
Добавьте ключевое слово inset — тень будет внутри элемента, что создаёт эффект вдавленности.
Это четвёртое значение: оно увеличивает или уменьшает размер тени до размытия. Положительное расширяет тень, отрицательное сжимает.
Скорее всего, мало размытия или слишком насыщенный цвет. Увеличьте blur и сделайте цвет полупрозрачным (например, чёрный с альфой 0.1–0.2).
Линейные градиенты с предпросмотром.
Скругление углов с предпросмотром.
Контраст цветов по стандарту WCAG.
Оттенки и тона из базового цвета.
Иконки сайта всех размеров из картинки.
Раскладка flex с предпросмотром.