Генератор тіней CSS box-shadow онлайн

Синтаксис box-shadow

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color. offset-x і offset-y — зміщення тіні по горизонталі та вертикалі (від'ємні значення — ліворуч/вгору). blur-radius — розмитість (0 = різка тінь). spread-radius — розширення або стиснення тіні. inset — внутрішня тінь.

Кілька шарів тіней

CSS дозволяє накладати кілька тіней через кому: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.2). Багатошарові тіні виглядають реалістичніше, ніж одна велика тінь. Матеріальний дизайн Google використовує саме цей прийом для різних рівнів підйому (elevation).

Ефект neumorphism

Neumorphism (new skeuomorphism) — дизайн-тренд, що імітує м'яко опуклі елементи. Реалізується двома тінями: одна світла (верхній лівий кут), одна темна (нижній правий кут). Приклад: box-shadow: 5px 5px 10px #d1d9e6, -5px -5px 10px #ffffff. Виглядає красиво, але може мати проблеми з доступністю.

Продуктивність тіней

Великі розмиті тіні на елементах, що анімуються, можуть спричинити проблеми з продуктивністю. Оптимізація: використовуйте filter: drop-shadow() для PNG із прозорістю. Для анімацій по можливості використовуйте opacity або transform замість зміни box-shadow — вони не викликають reflow.