Генератор CSS-тіней (box-shadow)

У декларації box-shadow шість рухомих частин — зміщення X та Y, розмиття, розширення, колір і необов'язкове ключове слово inset — і єдиний спосіб підібрати їх правильно — це побачити. Цей генератор виносить кожну частину на повзунок і рендерить результат на прев'ю-картці під час перетягування, тож рядок CSS унизу — завжди саме те, на що ви дивитеся.

Реалістичні тіні рідко складаються з одного шару. Список шарів дозволяє скласти до чотирьох тіней в одній декларації: щільна темна лінія для чіткості краю плюс широка м'яка заливка для елевації, або пара «світло-темрява», що визначає неоморфізм. Виберіть шар, щоб редагувати його, приберіть зайві — і зведене значення box-shadow оновиться наживо.

На темних інтерфейсах тіні читаються зовсім інакше: чорна тінь на майже чорній сторінці просто зникає. Перемикач тла прев'ю змінює підкладку між світлою і темною, щоб перевірити обидві теми до релізу. Пресет-сторінки покривають варіанти, які люди справді шукають: м'яка тінь елевації, внутрішнє заглиблення inset, двошаровий рецепт неоморфізму та делікатна тінь картки.

Як і кожен інструмент на цьому сайті, генератор безкоштовний і працює повністю у вашому браузері: без завантажень, без акаунта, а після відкриття сторінки він продовжує працювати офлайн.