Генератор / Парсер CSS Box Shadow
Параметри
Живий перегляд
Про CSS Box Shadow Generator / Parser
Цей інструмент допомагає візуально створювати CSS box-shadow значення та парсити вже готові рядки box-shadow.
Він корисний для UI дизайну, CSS debugging, design systems і швидких експериментів із тінями.
Як користуватися інструментом
- Введіть offset, blur, spread, color та inset параметри, щоб згенерувати box-shadow.
- Або вставте готовий box-shadow рядок у поле input і натисніть Parse.
- Перегляньте live preview.
- Скопіюйте готове CSS значення, коли результат вас влаштує.
Поради
- Більші blur значення створюють м’якші тіні.
- Від’ємний spread може зробити тінь компактнішою.
- Inset тіні добре підходять для pressed або recessed UI елементів.
- RGBA кольори добре підходять для м’яких прозорих тіней.
Перевірки box shadow перед застосуванням elevation
Shadows можуть передавати depth і focus, але впливають на perceived contrast, clipping, performance і consistency між themes.
Визначте elevation scale
Використовуйте невеликий набір shadow levels замість окремих values для кожної card, button, modal і hover state.
Перевірте clipping і overflow
Перегляньте shadows у scroll containers, rounded parents, transformed elements, dialogs, sticky headers і біля viewport edges.
Тестуйте light і dark themes
Налаштуйте opacity, spread, blur і color так, щоб shadows були subtle у light mode і видимі без haze у dark mode.
Профілюйте великі surfaces
Не анімуйте дорогі shadows на великих або repeated elements, якщо transform, opacity чи pseudo-element достатні.
Пов’язані інструменти
Можливо, тобі також стануть у пригоді ці інструменти.