Ключові моменти
- 01Кожен параметр box-shadow має своєю повзуном плюс числовий вхід для точності пікселя.
- 02Inset переключення переходить між тінню падіння та внутрішньою тінню для натиснутих або neumorphic ефектів.
- 03Колір та opacity контролюються окремо, виводячи rgba() для читаємого CSS.
- 04Перегляд використовує реальне CSS властивість на реальному елементі — те, що ви бачите, це саме те, що ваш стильний лист візуалізує.
Чому використовувати генератор Visual Box-Shadow
CSS box-shadow займає до шести значень — горизонтальний offset, вертикальний offset, blur radius, spread radius, color та необов'язковий inset ключове слово. Введення їх від пам'яті працює для простих тіней, але для чого-небудь більше нюансів — тісна світлина, глибока тінь падіння, м'єкий шар elevatio — ви здогадуєтесь та перезавантажуєтесь, поки щось не виглядає правильно.
Генератор зору згортає цей цикл ітерації. Перемістіть повзунок, бачите зміну миттєво та копіюйте лише коли ви задоволені. Генератор box-shadow від Handytool запускається повністю у вашому браузері, тому перегляд є реальним CSS властивість застосованим до реального елементу — немає різниці в рендеруванні між інструментом та вашою фактичною сторінкою.
Як дизайн тіні Box
- 01
Відрегулюйте горизонтальні та вертикальні offsets
Позитивні значення перемістять тінь вправо та вниз. Негативні значення переміщуються вліво та вгору. Центрована тінь (0, 0) створює світлину ефект.
- 02
Встановіть blur radius
Вищі значення blur створюють м'якші, більш дифузні тіні. Нульовий blur створює жорстку, суцільну тінь контур.
- 03
Відрегулюйте spread radius
Позитивне розширення збільшує тінь перед спорідненням. Негативне розширення мотрує його, що корисно для тісних під-елементні тіней.
- 04
Виберіть колір та opacity
Використовуйте збирач кольорів, щоб вибрати оттінок тіні, потім циферблат вниз opacity для тонкості. Вихід використовує rgba() для утримання значень читаємими.
- 05
Переключите inset, якщо потрібно
Inset переходить від тіні падіння до внутрішньої тіні — корисна для натиснутих кнопок, потопленнях введень та neumorphic поверхонь.
- 06
Копіюйте декларацію CSS
Натисніть Copy, щоб взяти повне значення box-shadow та вставити його у ваш стильний лист.
Немає завантаження, немає облікового запису
Генератор повністю клієнт-сторона. Ваші вибори кольорів, числові значення та перегляд Стану залишаються у вашому браузері — нічого не надсилається на сервер. Немає облікового запису для створення та немає обмеження використання.
Тому що елемент перегляду використовує реальне CSS властивість box-shadow, вихід є точним за визначенням — немає полотна рендерування або скріншоту наближення залучено. Значення пікселя ви копіюєте — значення пікселя браузер застосовує.
Box-Shadow Generator FAQ
Що робить значення spread?
Позитивне розширення збільшує тінь у всіх напрямках перед спорідненням; негативне розширення мотрує його. Корисна для тісних, визначених світлин при парі з низьким спорідненням.
Чи можу я додати кілька тіней box?
Цей генератор виводить одну тінь одночасно. Для шарування їх, скопіюйте значення та розділіть-разрізьте кілька тіней комами у вашому CSS — box-shadow приймає список, розділений комами.
Чому моя інвертна тінь невидима?
Inset тіні малюють всередину елемента, тому їм потрібна фонова колір або видима прокладка для показу. Вони не з'являються на прозорих або нульових розмірних елементах.
Чи точна перегляд пікселя?
Так — перегляд використовує реальне CSS властивість box-shadow на реальному DOM елементі, так що те, що ви бачите, це саме те, що ваш стильний лист буде виробляти.
Що таке neumorphic тінь?
Neumorphism використовує дві тіні — одна світла та одна темна — перевищити в протилежних напрямах, щоб зробити елемент виглядає підняле або натиснуте з квартирної поверхні. Обидві тіні є типово inset для натиснутого варіанту.