Як створити CSS box-shadow і скопіювати код?

Налаштуйте повзунки зміщення по x та y, розмиття, поширення, Колір і прозорість, спостерігаючи за живим переглядом. Потім натисніть Копіювати у виводі CSS. Також можна почати з Пресетів, як-от М'яка, Свічення або Material 8.

Чи можна накласти кілька тіней на один елемент?

Так. Натисніть + Додати ще один шар тіні, щоб додати більше шарів, а потім змінюйте їх порядок, Приховати або Видалити кожен. Шари об'єднуються комами в одному значенні box-shadow.

Як зробити внутрішню тінь?

Виберіть шар і увімкніть Внутрішня тінь або завантажте пресет Внутрішня. Після цього вивід міститиме ключове слово inset для цього шару.

Чи можна отримати клас Tailwind замість звичайного CSS?

Так. Окрім оголошення CSS, інструмент виводить клас Tailwind з довільним значенням у формі shadow-[...], де пробіли замінено на підкреслення, готовий для вставлення у вашу розмітку.

Чи є простіший спосіб задати положення тіні, ніж повзунками?

Так. Перетягніть вікно перегляду, щоб перемістити тінь активного шару, і утримуйте Shift для точного контролю. Ви також можете змінити Фон перегляду та Колір блоку, щоб побачити, як тінь виглядає на вашому дизайні.

Це справді безкоштовно?

Так. Кожен інструмент безкоштовний, без облікового запису та кредитної картки. Робота виконується на вашому пристрої, а не на наших серверах, що й дає змогу залишати її безкоштовною.

Працює на мобільних?

Так. Працює в сучасних мобільних браузерах на iOS і Android, нічого встановлювати не потрібно.

🎨

Генератор CSS box-shadow — безкоштовно

Візуальний будівельник CSS box-shadow із живим попереднім переглядом, багатошаровим накладанням, палітрою кольорів, перемикачем inset і копіюванням одним кліком. Включає налаштування Material, neumorphism та glow.

Працює у браузеріБез реєстрації та спливаючих віконРеєстрація не потрібнаБезкоштовно назавжди

Працює офлайн після завантаження

Фон перегляду

Перетягніть прямокутник, щоб розташувати тінь активного шару — утримуйте Shift для точного управління

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Пресети

Колір блоку

Радіус заокруглення (16px)

x (0px)

y (4px)

розмиття (12px)

поширення (0px)

Колір

Непрозорість (15%)

Внутрішня тінь

Типові застосування

Тіні Card UIПобудуйте елегантні тіні карток для приладних панелей, сіток продуктів та приладних панелей.
Ефекти Натиску КнопкиПобудуйте тіні кнопок, які імітують глибину реального світу та стани натиску.
Neumorphism Soft UIСтворіть м'який UI neumorphism вид з парними світлими + темними тінями.
Модальні та Popover ТініСтворіть піднесений, плаваючий вид для діалогів та розпадаючихся меню.
Ефекти сяйва та кільця фокусуСтворюйте ефекти яскравого світіння, кільця фокусу та неонові підсвічування.

Як це працює

Генератор box-shadow — повністю клієнтський інструмент на React, без сервера й бібліотек. Він зберігає в стані список об’єктів шарів тіні, при кожній зміні збирає коректні рядки CSS box-shadow за допомогою власноруч написаного форматувальника rgba() і застосовує їх прямо до елемента перегляду через проп style у React, тож результат миттєво малює власний рушій рендерингу браузера.

1
Параметри шарів передаються форматувальнику
Кожен шар тіні зберігає зміщення x/y, розмиття, поширення, колір hex і непрозорість. При кожній зміні невелика функція shadowToCss перетворює колір hex на компоненти RGB регулярним виразом і збирає рядок rgba() — наприклад, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Кілька шарів об’єднуються через коми.
2
Браузер рендерить живий перегляд
Зібраний рядок присвоюється властивості стилю boxShadow елемента div прямо в JSX. React оновлює атрибут DOM, а CSS-рушій браузера одразу малює тінь — без canvas чи WebGL, лише нативний рендеринг CSS.
3
Перетягування для розміщення використовує Pointer Events API
Натискання й перетягування блоку перегляду викликає setPointerCapture на елементі, а потім відстежує зміни onPointerMove, щоб у реальному часі оновлювати зміщення x і y активного шару. Утримання Shift застосовує коефіцієнт 0.25x для точного позиціонування.
4
Результат копіюється в буфер обміну
Інструмент створює два формати з тих самих даних шарів: стандартне оголошення CSS box-shadow і клас Tailwind з довільним значенням (shadow-[...]), де пробіли замінено підкресленнями за правилами синтаксису Tailwind. Копіювання в один клік використовує navigator.clipboard.writeText.