Генератор CSS box-shadow
Створюйте CSS box-shadow з налаштуванням зміщення, розмиття, розтягування та кольору, з підтримкою кількох шарів та готових шаблонів.
Генератор CSS box-shadow
Налаштовуйте горизонтальне та вертикальне зміщення, радіус розмиття, радіус розтягування та колір — інструмент створить відповідне оголошення box-shadow під час вводу даних. Він розроблений як для повсякденних випадків (карточка, кнопка, модальне вікно, яке повинно виступати над сторінкою), так і для багатошарових тіней, створених шляхом накладення кількох тіней — методу, що лежить в основі м'якої, реалістичної глибини, яка використовується в більшості сучасних систем проектування.
Відкривне меню «Шаблон» пропонує три готових варіанти: тонку, середню та насичену тінь з попередньо підібраною кількістю шарів, зміщенням та розмиттям; виберіть «Власний» для повного управління кожним значенням. Опція «Шари» визначає кількість накладених тіней: кожен додатковий шар збільшує зміщення та розмиття й знижує його прозорість, перетворюючи одну плоску тінь на м'яку, переконливу. Параметр «Внутрішня» розвертає тінь всередину для натиснутих елементів, «Прозорість» контролює інтенсивність кольору, а перемикач одиниць виводить результат у px або rem. Включіть варіант для темного режиму, щоб отримати друге, більш інтенсивне оголошення, обгорнуте в блок @media (prefers-color-scheme: dark) — на темному фоні тінь потребує більшої прозорості, щоб залишатися видимою. Виберіть, як виводити результат: в один рядок, як власне властивість --box-shadow або як клас .box-shadow, та додайте відповідний filter: drop-shadow для елементів, які недоступні для box-shadow, таких як SVG значок або прозорий PNG.
Кожне значення обмежено розумним діапазоном, і невпізнаний колір повернеться до чорного замість пошкодженого CSS, тому результат завжди готовий для вставлення в таблицю стилів.
Усі обчислення відбуваються у вашому браузері під час налаштування елементів управління — колір та згенерований CSS ніколи не надсилаються нікуди. Скопіюйте результат, завантажте його як файл .txt або відправте в інший інструмент для подальшої роботи.