Реклама мешает? Идти Без рекламы Сегодня 

CSS Тени Получение реалистичных результатов без проб и ошибок

Опубликовано Май 2, 2026

CSS Box Shadows: Достижение реалистичных результатов без проб и ошибок 1

Тень в CSS — одно из тех свойств, которые кажутся простыми, пока вы смотрите на результат, который выглядит как изображение из 2008 года. Синтаксис короткий, но то, что делает каждое значение, и как они взаимодействуют, неочевидно. Вот как написать тени, которые выглядят продуманными, а не просто вставленными.

Синтаксис, расшифрованный

box-shadow: offset-x offset-y blur-radius spread-radius color;

Пять значений. Давайте будем точными по каждому:

offset-x: На сколько тень смещается горизонтально. Положительное значение сдвигает её вправо; отрицательное — влево.
offset-y: На сколько тень смещается вертикально. Положительное значение сдвигает её вниз.
blur-radius: Ослабляет тень. При 0, края тени жёсткие. При увеличении значения тень размывается наружу с помощью гауссовой размытия, применённой к форме тени.
spread-radius: Расширяет или сжимает тень перед размытие. Положительное значение делает тень больше, чем элемент; отрицательное — меньше.
color: Цвет тени. Частой ошибкой является использование чистого чёрного цвета.
inset: Опциональное ключевое слово, которое переворачивает тень внутрь элемента.

Размытие против расширения: путаница, разрушающая тени

Эти два значения являются источником большинства моментов «почему это выглядит странно».

Размытие делает тень мягкой. Оно имитирует рассеивание света — чем дальше от источника, тем больше тень распространяется. Размытие на маленьком элементе выглядит совершенно иначе, чем на большом. blur-radius — вывести его из этих потоков. Поэтому я создал встроенную проверку в приложении, которая выполняет снимок экрана с помощью ScreenCaptureKit (современный, публичный API записи), используемый QuickTime под капотом. Я попробовал как одноразовую запись ( 8px Расширение

увеличивает или уменьшает базовую форму тени. Если вы хотите создать впечатление, что тень «удалена» и мягкая, увеличение размытия без отрицательного расширения означает, что тень выходит за пределы границ элемента, что может выглядеть неестественно. Небольшое отрицательное расширение сжимает тень, чтобы размытие начиналось с более естественной основы. Правильная комбинация обычно — умеренное размытие с нулевым или слегка отрицательным расширением. Так работают реальные тени — они мягче на расстоянии, но не расширяются за пределы объекта, который их создает.

Создание естественного вида теней

Три правила для теней, которые выглядят продуманными:

1. Не используйте чистый чёрный цвет.

Реальные тени захватывают цвет окружающей среды. Тёмный синий или тёплый тёмный серый при прозрачности читается как тень, не выглядя как нанесённый шаблон. Попробуйте 0.10–0.15 как начальную точку, затем немного сместите оттенок в тёплую или холодную сторону, чтобы соответствовать вашей палитре. rgba(0, 0, 0, 0.12) 2. Соответствуйте одному источнику света.

Если тени идут в разных направлениях на разных элементах, страница будет восприниматься как несогласованная. Выберите направление — обычно положительное (свет сверху) — и соблюдайте его на всей странице. offset-y 3. Держите прозрачность низкой.

Тень при полной прозрачности выглядит как рамка. Если вы можете ясно видеть жёсткую границу, вы либо слишком прозрачны, либо убрали размытие. Реальные тени — тонкие, они дают объём, а не контур. Слоение нескольких теней для глубины

CSS позволяет использовать запятые для разделения слоёв теней на одном элементе. Именно здесь вы получаете реальную глубину без визуальных артефактов.

Вместо одной большой тени попробуйте две: тесную тень для контакта и рассеянную тень для высоты.

Первый слой устанавливает элемент на поверхности. Второй добавляет ощущение того, что он висит над поверхностью. Ни один из слоёв не является «тенью» в изоляции — вместе они создают иллюзию глубины. Физически это имитирует, как сильный источник света вблизи создаёт тесную тень под элементом, а окружающий свет заполняет мягкий ореол дальше от него.

box-shadow:
  0 2px 4px rgba(0, 0, 0, 0.08),
  0 8px 24px rgba(0, 0, 0, 0.06);

Внутренние тени: когда свет меняется

ключевое слово рисует тень внутри границ элемента, а не снаружи. Основные случаи использования:

The inset Состояние нажатой кнопки

: Малая внутренняя тень насоздаёт физическое ощущение углубления, как при настоящем нажатии кнопки. :active Глубина поля ввода
: Поля ввода и текстовые области чувствуются как вложенные в поверхность с внутренней тенью на верхнем крае — паттерн, который возвращается к скульптурному дизайну, но всё ещё читается ясно.Производительность: когда использовать filter: drop-shadow вместо этого

/* Pressed button */
button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Input field depth */
input {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.10);
}

вызывает перерисовку

box-shadow при каждом изменении — не только на элементе, но и на слое, на котором он рисуется. Для анимаций или интерфейсов с большим скроллингом это добавляет измеримую стоимость. работает на GPU-композиторе и значительно дешевле для анимированных теней. Он также следует фактической форме элемента (включая прозрачные области), в то время как всегда следует прямоугольнику по модели элемента.

filter: drop-shadow() Практическое правило: используйте box-shadow для статических теней на элементах разметки. Используйте

на анимированных элементах или SVG, где тень должна соответствовать визуальной форме, а не границе элемента. box-shadow Токены теней для системы дизайна filter: drop-shadow Прямое ввод значение теней для каждого компонента приводит к несогласованности. Определите небольшой набор токенов размещения один раз, затем ссылайтесь на них повсюду.

Каждый токен использует двухуровневый подход: тесная тень для контакта и рассеянная тень для высоты. Размытие и прозрачность увеличиваются с ростом высоты — чем дальше от поверхности, тем мягче и более расширенной становится тень.

Эти значения хорошо работают на белом и светлом сером фоне. На темных фонах инвертируйте логику — используйте более светлые, полупрозрачные цвета для внутренних теней вместо тёмных для теней, отбрасываемых на поверхности.

:root {
  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 1px 4px rgba(0, 0, 0, 0.04);

  --shadow-md:
    0 2px 4px rgba(0, 0, 0, 0.07),
    0 4px 12px rgba(0, 0, 0, 0.06);

  --shadow-lg:
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.06);

  --shadow-xl:
    0 8px 16px rgba(0, 0, 0, 0.08),
    0 16px 48px rgba(0, 0, 0, 0.06);

  --shadow-2xl:
    0 12px 24px rgba(0, 0, 0, 0.10),
    0 32px 80px rgba(0, 0, 0, 0.08);
}

Пропускайте догадки

Если вы работаете с значениями теней — особенно при слоении нескольких теней или при тестировании различных прозрачностей — живой просмотр экономит значительное время. В

на IO Tools вы можете настраивать все шесть параметров в реальном времени, ставить несколько слоёв теней и копировать сгенерированный CSS напрямую. Полезно для настройки новых токенов дизайна или проверки того, как тень выглядит правильно, до того как она попадёт в производство.

Разница между тенью, которая выглядит продуманной, и тенью, которая выглядит просто вставленной, обычно заключается в трёх вещах: низкой прозрачности, цвете, не чистом чёрном, и том, чтобы позволить размытию выполнять работу, которую расширение никогда не предназначало. Генератор CSS теней для блоков CSS Тени: Получение реалистичных результатов без проб и ошибок 2

CSS Тени: Получение реалистичных результатов без проб и ошибок 1