Генератор Box Shadow
Генератор тіней створює CSS box-shadow за допомогою повзунків для зміщення по X і Y, розмиття, розтягування, кольору, прозорості та inset, пропонує пресети Material Design і Tailwind і видає точний CSS-код.
Про цей інструмент
Генератор тіней створює CSS box-shadow за допомогою повзунків для зміщення по X і Y, розмиття, розтягування, кольору, прозорості та inset, пропонує пресети Material Design і Tailwind і видає точний CSS-код.
Як користуватися
- Почніть із пресета або залиште «Власний».
- Налаштуйте зміщення X/Y, розмиття, розтягування та прозорість.
- Оберіть колір тіні й позначте Inset для внутрішньої тіні.
- Натисніть «Копіювати CSS», щоб вставити правило box-shadow.
Корисно знати
- Синтаксис box-shadow: [inset] offset-x offset-y blur-radius spread-radius color.
- Більший радіус розмиття пом'якшує край; розтягування збільшує або зменшує тінь перед розмиттям.
- Темні тіні з низькою непрозорістю (приблизно 10–25%) виглядають природніше, ніж суцільний чорний.
- Кілька тіней можна накласти одна на одну, розділивши їх комами.
- Ключове слово inset малює тінь усередині рамки елемента.
Працює повністю у вашому браузері — нічого з того, що ви вводите, не завантажується й не зберігається.
Поширені запитання
Як додати тінь до div у CSS?
Використайте властивість box-shadow, наприклад box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2); цей інструмент напише значення за вас.
Чим розмиття відрізняється від розтягування?
Розмиття визначає, наскільки м'яким буде край тіні. Розтягування збільшує або зменшує розмір тіні до застосування розмиття.
Як зробити внутрішню тінь?
Додайте ключове слово inset на початку значення або позначте Inset в інструменті.
Чи можна використовувати кілька тіней box-shadow?
Так. Розділяйте тіні комами; багатошарові тіні, як у пресетах Material і Tailwind, виглядають реалістичніше.