Генератор CSS box-shadow
Створюйте шарові CSS box-shadow за допомогою живих повзунків зсуву, розмиття, поширення, кольору, прозорості та вставки — переглядайте на реальному елементі та копіюйте готовий CSS.
box-shadow: —;
Все оновлюється в реальному часі у вашому браузері — без завантажень, без реєстрації, повністю безкоштовно.
Про Генератор CSS box-shadow
Генератор CSS Box Shadow дає змогу створювати тіні box-shadow візуально замість того, щоб вгадувати значення в коді. Перетягуйте повзунки для горизонтального й вертикального зсуву, радіуса розмиття, радіуса розтяжки, кольору та прозорості — з перемикачем "всередину" — і спостерігайте, як реальний елемент оновлюється наживо. Коли результат виглядає правильно, скопіюйте готовий CSS одним кліком.
Сучасні тіні інтерфейсу рідко бувають одношаровими. Цей генератор підтримує стек шарів тіні: додавайте, дублюйте, приховуйте чи видаляйте шари та переглядайте або обраний шар окремо, або всі шари разом. Накладання щільної темної тіні під м'якою широкою — це саме те, що надає карткам і кнопкам глибини.
Ви також можете стилізувати сам елемент попереднього перегляду — колір блока, радіус рамки та фон полотна — щоб тінь оцінювалась у реалістичному контексті, включно з темними поверхнями. Почніть з пресета, натисніть "Рандомізувати шар" для натхнення й скидайте налаштування, коли захочете чистий аркуш. Усе працює у вашому браузері.
Як використовувати Генератор CSS box-shadow
- Налаштуйте повзунки горизонтального зсуву, вертикального зсуву, розмиття, розтяжки, кольору та прозорості й увімкніть "Внутрішня тінь", якщо потрібна тінь усередині.
- Натисніть "Додати шар" або "Дублювати шар", щоб накласти тіні, і перемикайте режим попереднього перегляду між "Цей шар" і "Усі шари", щоб налаштувати кожен окремо.
- Налаштуйте елемент і полотно — колір блока, радіус рамки та фон — щоб попередній перегляд відповідав вашому реальному дизайну.
- Застосуйте пресет або скористайтеся "Рандомізувати шар", якщо хочете отримати стартову точку замість порожнього набору повзунків.
- Скопіюйте повне правило CSS (або лише значення) і вставте його у свою таблицю стилів.