CSS-властивість box-shadow додає один або декілька ефектів тіні навколо рамки елемента. Повний синтаксис:

box-shadow: [зсув-x] [зсув-y] [радіус-розмиття] [радіус-розтягу] [колір] [inset];

Математичне представлення одного шару тіні:

$$S_i = f(h_i, v_i, b_i, s_i, c_i, inset_i)$$

• Горизонтальний зсув (h): $$h \in \mathbb{Z}$$ — Додатні значення розміщують тінь праворуч; від'ємні — ліворуч.
• Вертикальний зсув (v): $$v \in \mathbb{Z}$$ — Додатні значення зсувають тінь донизу; від'ємні — догори.
• Радіус розмиття (b): $$b \in \mathbb{R}^+$$ — Контролює м'якість країв через алгоритм гаусівського розмиття. 0 дає чіткий край.
• Радіус розтягу (s): $$s \in \mathbb{Z}$$ — Додатні значення рівномірно розширюють тінь перед розмиттям; від'ємні — звужують.
• Колір (c): Будь-який валідний CSS-колір (HEX, RGBA, HSL). Альфа-канал контролює прозорість: $$\alpha \in [0, 1]$$.
• Внутрішня (inset): $$inset \in \{0, 1\}$$ — Коли встановлено, тінь рендериться всередині рамки елемента.

Композиція декількох шарів:

Для n шарів тіней загальний box-shadow є об'єднанням:

$$\text{box-shadow} = \bigcup_{i=1}^{n} S_i = S_1,\; S_2,\; \dots,\; S_n$$

Розрахунок області розмиття:

Візуальну протяжність тіні можна оцінити як:

$$\text{total-extent} = |h| + |v| + s + 2b$$

Ця формула враховує відстань зсуву, розширення розтягу та радіус розмиття з обох боків елемента.