Генератор тіні коробки

Створюйте багатошарові прямокутні тіні зі зміщенням, розмиттям, поширенням і кольором. Перегляньте на картці, а потім скопіюйте CSS в один клік.

Box Shadow Generator

Live

Offset X8px

Offset Y16px

Blur32px

Spread-4px

Opacity35%

Card radius24px

Shadow color

Inset

Preview card

CSS output

box-shadow: 8px 16px 32px -4px rgba(192, 38, 211, 0.35);
border-radius: 24px;

Key capabilities

Створюйте багатошарові прямокутні тіні зі зміщенням, розмиттям, поширенням і кольором — включено попередній перегляд.
Запускається у вашому браузері
Безкоштовне використання

Як користуватися

Відрегулюйте зміщення, розмиття та поширення.
Виберіть колір і непрозорість (або додайте шари).
Скопіюйте CSS box-shadow.

How this tool works

Відрегулюйте зміщення, розмиття та поширення.
Виберіть колір і непрозорість (або додайте шари).
Скопіюйте CSS box-shadow.

Recommended settings

Спочатку скористайтеся параметрами за замовчуванням, а потім відкоригуйте, якщо потрібно

Supported formats

Text / on-page input

File size and limits

Дуже складні багатошарові попередні перегляди можуть працювати повільніше на старих телефонах.

Privacy

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

Common use cases

Використовуйте Box Shadow Generator у будь-який час: створюйте багатошарові коробчасті тіні зі зміщенням, розмиттям, поширенням і кольором — включено попередній перегляд.

Troubleshooting

Після вставлення попередній перегляд виглядає інакше

Перевірте наявність конкуруючих CSS на вашій сторінці (скидання, успадковані кольори). Спершу скопіюйте згенероване правило в ізольовану таблицю стилів.

FAQ

Це завантажує мій CSS?

Ні. Генератори та конвертери працюють у вашому браузері з попереднім переглядом.

Чи потрібен мені обліковий запис?

Ні. Відкрийте інструмент, налаштуйте елементи керування та скопіюйте CSS.