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

Що це за інструмент?

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

Цей інструмент перетворює це на пряме керування: перетягніть повзунок, подивіться, як змінюється тінь на живому прикладі, і скопіюйте готовий CSS, коли результат вас влаштує. Вибір кольору разом із повзунком прозорості автоматично формує коректне значення rgba(), адже напівпрозорі тіні зазвичай виглядають природніше за повністю непрозорі.

Навіщо його використовувати?

• Живий перегляд оновлюється миттєво при кожній зміні — ви бачите точну тінь ще до того, як переносите її в код.
• Повний контроль над зміщенням по X, зміщенням по Y, розмиттям, розтягненням, кольором і прозорістю в одному місці.
• Один клік додає inset для ефекту вдавленості замість тіні, що ніби ширяє над елементом.
• На виході — готовий до вставки CSS із кольором, уже перетвореним у rgba() з обраною прозорістю.
• Працює повністю у вашому браузері — жодні налаштування нікуди не завантажуються.
• Безкоштовно, без реєстрації, працює на мобільних.

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

1. Встановіть зміщення по X та по Y, щоб розташувати тінь — додатні значення зсувають її праворуч/донизу, від'ємні — ліворуч/догори.
2. Збільшіть радіус розмиття, щоб пом'якшити край тіні; збільшіть розтягнення, щоб тінь стала більшою за сам елемент.
3. Виберіть колір і налаштуйте прозорість — більшість реалістичних тіней використовують 15–40% непрозорості замість суцільного чорного.
4. Позначте 'inset', якщо хочете, щоб тінь з'явилася всередині рамки елемента, а не позаду нього.
5. Скопіюйте згенерований CSS і вставте його у свою таблицю стилів.

Приклад

Введення

Зміщення: 0px, 10px · Розмиття: 20px · Розтягнення: 0px · Колір: чорний з непрозорістю 35%

Результат

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

М'яка тінь прямо під елементом без горизонтального зміщення — один із найпоширеніших стилів тіней для карток і кнопок.

Одна тінь чи кілька шарів тіней

Цей інструмент будує один шар тіні, чого достатньо для переважної більшості реальних випадків — кнопки, картки, модальні вікна та випадаючі меню майже завжди використовують одну тінь. CSS підтримує кілька тіней на одному елементі через кому для складніших ефектів глибини (наприклад, вузька темна тінь під м'якою широкою), але це вже доопрацювання, яке можна зробити вручну: згенеруйте одну тінь тут, потім продублюйте рядок, скоригуйте другий набір значень і об'єднайте їх комою.

Поширені шаблони box-shadow

• Легке підняття картки: невелике зміщення (0–4px), помірне розмиття (8–16px), чорний з непрозорістю 10–20%.
• Піднесене модальне вікно/випадаюче меню: більше зміщення (4–10px) і розмиття (20–30px), непрозорість 20–35% для сильнішого відчуття ширяння.
• Вдавлена кнопка: позначте inset, використайте невелике 'негативне' зміщення й помірне розмиття, щоб тінь читалась як вм'ятина, а не підйом.
• Кольорове світіння: виберіть фірмовий колір замість чорного, підніміть непрозорість до 40–60% і трохи збільшіть розтягнення для м'якого світіння навколо кнопок.
• Різка/жорстка тінь: встановіть розмиття та розтягнення на 0 для суцільного зміщеного силуету замість м'якої тіні.

Поєднання із заокругленими кутами

Тіні й заокруглені кути постійно використовуються разом — картки, кнопки й модальні вікна майже завжди поєднують обидва прийоми. Скористайтеся генератором border-radius, щоб заокруглити кути того самого елемента, а потім застосуйте обидва згенеровані оголошення CSS разом.

→ Генератор border-radius · Конвертер одиниць

Часті запитання