Ми можемо використовувати тіні для створення візуального ефекту, коли елемент ніби парить над фоном. Цей ефект може створювати глибину, виділяти певні елементи та додавати візуального інтересу до веб-сторінки. Для цього ми можемо застосувати властивість 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.