Як користуватися: Генератор box-shadow
- 1
Оберіть початкову тінь
Натисніть шаблон, наприклад «Мʼяка», «Багатошарова» чи «Підняття 2», або змініть типовий шар.
- 2
Налаштуйте кожен шар
Виберіть шар і задайте зсув по X та Y, розмиття, розтягнення, колір, непрозорість і внутрішню тінь.
- 3
Перевірте на своїй поверхні
Змініть розмір блока, радіус заокруглення та кольори відповідно до елемента, який ви оформлюєте.
- 4
Скопіюйте CSS
Скопіюйте оголошення box-shadow або клас Tailwind у свій код.
Ліміти та Pro
Безкоштовно й без реєстрації: необмежена кількість шарів, зсув від −100 до 100 px, розмиття до 200 px і 12 шаблонів тіней.
Pro прибирає рекламу; редактор тіней повноцінний на будь-якому тарифі. Дивитися Pro
Про інструмент: Генератор box-shadow
Властивість CSS box-shadow приймає список шарів, кожен з яких має горизонтальний і вертикальний зсув, радіус розмиття, розтягнення, колір і необовʼязкове ключове слово inset. Щоб глибина виглядала природно, потрібно збалансувати всі ці параметри у двох чи більше шарах, а підбирати числа просто в таблиці стилів незручно. Цей редактор показує результат на живому блоці попереднього перегляду, поки ви рухаєте повзунки, і сам записує оголошення та клас Tailwind shadow-[…].
Додавайте скільки завгодно шарів, тимчасово приховуйте будь-який для порівняння, переміщуйте його вгору чи вниз (перший шар у списку малюється поверх решти) або робіть його внутрішнім для натиснутих кнопок і полів введення. Зсув можна задати від −100 до 100 пікселів, розмиття — до 200 пікселів, розтягнення — від −100 до 100, а кожен колір має власну непрозорість. Відʼємне розтягнення — прийом сучасних мʼяких тіней: воно втягує тінь під елемент, і знизу лишається лише ледь помітне сяйво.
Блоку попереднього перегляду можна змінити розмір, радіус заокруглення, колір і колір тла, щоб оцінити тінь на реальній поверхні вашого дизайну, зокрема в темних темах, де тіням потрібна більша непрозорість або кольорове сяйво.
У набір входить дванадцять шаблонів: чотири рівні підняття Material Design, мʼяка одношарова тінь, плавна пʼятишарова, жорсткий зсув у стилі нейбруталізму, неоморфізм, внутрішня тінь, кольорове сяйво, контурне кільце для фокусу та ефект левітації картки. Градієнти — на іншій вкладці; тіні тексту та фільтр drop-shadow() не підтримуються.
Приватність
Тінь створюється й показується повністю на цій сторінці, а ваші шари зберігаються лише в локальному сховищі цього браузера, щоб не зникнути після перезавантаження. Жодні налаштування чи макети не надсилаються на сервер.