М’яка тінь CSS — готовий код
Візуальне створення коду CSS box-shadow: повзунки для зсуву, розмиття, розтягування, кольору з прозорістю, режиму всередину та до чотирьох шарів із живим попереднім переглядом.
Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Про цей інструмент
Ця сторінка відкриває генератор box-shadow із попередньо завантаженою м’якою тінню: без горизонтального зсуву, 8px вниз, щедре розмиття 24px і низька непрозорість чорного 12%. Картка попереднього перегляду одразу її показує — посуньте будь-який повзунок, і рядок CSS миттєво зміниться.
М’які тіні — робоча конячка сучасних інтерфейсів. Велике розмиття в парі з низькою непрозорістю підіймає картку над сторінкою, не малюючи жорсткого контуру, тому більшість дизайн-систем тримають свої тіні піднесення саме в цьому діапазоні, а не використовують щільні, темні тіні раннього плаского дизайну.
Скопіюйте рядок box-shadow прямо у свою таблицю стилів або додайте до трьох додаткових шарів для більш насиченого піднесення. Генератор працює повністю у вашому браузері — нічого нікуди не завантажується.