Box Shadow: тени элементов для глубины и акцентов

Box Shadow добавляет элементам глубину, создавая эффект тени вокруг них. Она помогает выделить элементы и даёт дизайну более современный, многослойный вид.

​

Как это работает

Тень состоит из нескольких настроек, которые определяют её вид и поведение.

​

Настройки тени

​

Preset

• Быстро примените готовый стиль тени (например, Small, Medium, Large)
• Подходит для быстрого и единообразного оформления

​

Type

• Outer Shadow → тень появляется снаружи элемента (самый частый вариант)
• Inner Shadow → тень появляется внутри элемента

​

Size (X и Y)

• Задаёт положение тени
• X (по горизонтали) → сдвиг влево или вправо
• Y (по вертикали) → сдвиг вверх или вниз

👉 Пример:

• X: 0, Y: 4 → тень смещается чуть ниже элемента

​

Blur

• Задаёт мягкость тени

👉 Больше значение — мягче тень
👉 Меньше значение — резче тень

​

Spread

• Задаёт, насколько широко распространяется тень

👉 Положительное значение — тень больше
👉 Отрицательное значение — тень уже

​

Color

• Задаёт цвет тени (обычно чёрный или серый с прозрачностью)

👉 Часто используется: rgba(0, 0, 0, 0.1–0.3) для мягких теней

​

Несколько теней

• Нажмите + Add, чтобы наложить несколько теней друг на друга
• Полезно для более сложных многослойных эффектов