Генератор CSS Box Shadow
Візуальне створення коду CSS box-shadow: повзунки для зсуву, розмиття, розтягування, кольору з прозорістю, режиму всередину та до чотирьох шарів із живим попереднім переглядом.
🔒 Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Оголошення box-shadow має шість рухомих частин — зсув по X та Y, розмиття, розтягування, колір і необов’язкове ключове слово inset — і єдиний спосіб налаштувати їх правильно — бачити їх. Цей генератор виводить кожну частину на повзунок і показує результат на картці попереднього перегляду, поки ви перетягуєте, тож рядок CSS унизу завжди точно відповідає тому, що ви бачите.
Справжні тіні рідко складаються з одного шару. Список шарів дозволяє додати до чотирьох тіней в одному оголошенні: чітку темну лінію для окреслення краю плюс широке м’яке розмиття для піднесення, або світло-темну пару, яка визначає неоморфізм. Виберіть шар, щоб редагувати його, видаліть непотрібні — і об’єднане значення box-shadow оновлюється наживо.
Тіні виглядають зовсім по-різному на темних інтерфейсах, де чорна тінь на майже чорній сторінці просто зникає. Перемикач фону попереднього перегляду змінює тло між світлим і темним, щоб ви могли перевірити обидві теми перед публікацією. Сторінки з передналаштуваннями охоплюють варіанти, які люди дійсно шукають: м’яка тінь піднесення, внутрішня заглибина, рецепт неоморфізму з двох шарів і легка тінь для картки.
Як і кожен інструмент на цьому сайті, генератор безплатний і працює повністю у вашому браузері: без завантажень, без облікового запису, і він продовжує працювати офлайн після завантаження сторінки.