Можна використовувати тіні для блоків, щоб створити візуальний ефект, коли елемент ніби піднімається над фоном. Такий ефект додає глибини, виділяє окремі елементи та підвищує візуальну привабливість вебсторінки. Для цього застосовується властивість box-shadow.

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

• offset-x — горизонтальне зміщення тіні: додатне значення зміщує тінь праворуч від елемента, від’ємне — ліворуч;
• offset-y — вертикальне зміщення тіні: додатне значення зміщує тінь вниз, від’ємне — вгору;
• blur-radius — ступінь розмиття тіні, необов’язковий параметр; чим більше значення, тим сильніше розмиття;
• spread-radius — також необов’язковий параметр, збільшує або зменшує розмір тіні залежно від знаку значення;
• color — визначає колір тіні у будь-якому допустимому форматі, також необов’язковий параметр.

Примітка

Щоб підібрати найкращу тінь, відвідайте джерело генератор тіней.

Окрім властивості box-shadow, властивості text-shadow та drop-shadow дозволяють створювати тіні для тексту та інших елементів відповідно. Вони працюють так само, як і властивість box-shadow. Проте ці властивості використовуються рідше порівняно з box-shadow.