Генератор CSS box-shadow

Що таке Генератор CSS box-shadow?

Генератор CSS box-shadow — це безкоштовний візуальний редактор CSS-властивості box-shadow, створений для фронтенд-розробників і дизайнерів. Додайте один чи кілька шарів тіні та налаштуйте для кожного offset-x, offset-y, радіус розмиття, радіус розтягнення, колір і прапорець inset за допомогою простих числових полів і палітри вибору кольору. Вікно попереднього перегляду на шаховому тлі в реальному часі показує поєднаний результат, а повне оголошення box-shadow — із розділенням кожного шару комами — формується для копіювання. Використовуйте його, щоб створювати мʼякі тіні висоти, чіткий неоморфізм, ефекти сяйва чи багатошарову глибину в стилі Material, не запамʼятовуючи порядок значень.

Як користуватися Генератор CSS box-shadow

1. Задайте для першого шару offset-x і offset-y (у px), щоб змістити тінь по горизонталі та вертикалі; відʼємні значення зміщують її ліворуч або вгору.
2. Налаштуйте радіус розмиття (наскільки мʼяка тінь) і радіус розтягнення (наскільки вона збільшується чи зменшується).
3. Виберіть колір зразком або введіть шістнадцяткове значення — 8-значний hex, наприклад #00000040, задає прозорість тіні.
4. Установіть прапорець inset, щоб малювати тінь усередині елемента, а не зовні.
5. Натисніть «Додати шар», щоб накласти ще одну тінь зверху, потім змінюйте порядок, редагуючи значення; видалити будь-який шар можна кнопкою кошика.
6. Стежте за оновленням попереднього перегляду, потім скопіюйте згенерований CSS box-shadow у свою таблицю стилів.

Приклади

x 0, y 4, розмиття 12, розтягнення 0, колір #00000040

box-shadow: 0px 4px 12px 0px #00000040;

Шар 1: 0 1 2 0 #0000001a · Шар 2: 0 8 24 -4 #00000026

box-shadow: 0px 1px 2px 0px #0000001a, 0px 8px 24px -4px #00000026;

inset увімкнено, x 0, y 2, розмиття 6, розтягнення 0, колір #00000059

box-shadow: inset 0px 2px 6px 0px #00000059;

Поширені запитання

Який порядок значень box-shadow?

Кожен шар записується як offset-x, offset-y, радіус розмиття, радіус розтягнення, колір, з необовʼязковим ключовим словом inset попереду. Цей інструмент завжди виводить усі чотири довжини в px (offset-x, offset-y, розмиття, розтягнення), тож порядок однозначний і його легко підправити вручну згодом.

Чи можна додати напівпрозору або кольорову тінь?

Так. Введіть будь-який CSS-колір у поле кольору — повний 8-значний hex, наприклад #00000040 (останні дві цифри — це альфа), дає напівпрозору тінь, і ви можете використовувати іменовані кольори або будь-який hex. Зразок палітри працює зі суцільними кольорами #rrggbb; для альфа-каналу редагуйте текстове поле.

Як накласти кілька тіней?

Натискайте «Додати шар» для кожної додаткової тіні. Згенерований CSS розділяє кожен шар комами за порядком, згори вниз — перший шар малюється останнім (поверх інших). Використовуйте це для багатошарової глибини в стилі Material або щоб поєднати зовнішнє сяйво з inset-підсвічуванням.

Що робить прапорець inset?

Inset малює тінь усередині межі елемента, створюючи вигляд утиснутості або внутрішнього сяйва замість зовнішньої відкинутої тіні. Вмикайте його для кожного шару; в одному значенні box-shadow можна змішувати inset-тіні та зовнішні тіні.

Чи завантажуються мої дані кудись?

Ні. Генератор працює повністю у вашому браузері на JavaScript — ваші кольори та значення ніколи не надсилаються на сервер, тож він працює приватно й навіть офлайн після завантаження сторінки.