DevTulz Online

Генератор CSS Box Shadow

Фон

Що таке CSS Box Shadow?

Властивість CSS box-shadow додає ефекти тіні навколо рамки елемента. Тіні можна зміщувати, розмивати, розповсюджувати, забарвлювати та задавати як inset (внутрішня тінь). Декілька тіней, розділених комами, можна нашаровувати для багатих ефектів. Цей генератор дозволяє візуально створювати складні багатошарові тіні та копіювати готовий CSS до буфера обміну.

Як використовувати Генератор Box Shadow

  1. Налаштуйте повзунки для Offset X/Y, Blur та Spread для позиціонування та формування тіні.

  2. Натисніть на зразок кольору для вибору кольору тіні та використовуйте повзунок Opacity для прозорості.

  3. Увімкніть «Inset» для створення внутрішнього сяйва або ефекту вдавленості.

  4. Натисніть «+ Додати шар», щоб накласти кілька тіней одна на одну.

  5. Скопіюйте згенерований CSS та вставте його у свій файл стилів.

Часто задавані запитання

Яка різниця між box-shadow та фільтром drop-shadow? box-shadow додає тіні навколо прямокутного border-box елемента та підтримує внутрішні тіні. CSS filter: drop-shadow() застосовується до візуальної форми елемента (включаючи прозорість), дозволяючи їй слідувати непрямокутним контурам, як PNG-файли з прозорим фоном.

Як створити ефект піднесення карток Material Design? Складуйте два box-shadow: м'яку фонову тінь (великий blur, низька opacity, невелике розширення) та ключову тінь (менший blur, вища opacity, спрямований offset). Наприклад: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

Чи впливає box-shadow на макет сторінки? Ні. box-shadow не впливає на розмір або положення елемента в потоці документа. На відміну від outline, вона не займає місце в макеті і не переміщує інші елементи.

Чи можу я анімувати box-shadow? Так. box-shadow можна анімувати за допомогою CSS переходів та анімацій. Для оптимізації продуктивності переводьте box-shadow лише коли необхідно — браузери не можуть прискорювати зміни box-shadow за допомогою GPU так ефективно, як transform або opacity.

Keywords: генератор CSS box shadow, box-shadow CSS, інструмент тіні CSS, CSS drop shadow, внутрішня тінь, багатошарова тінь, CSS shadow онлайн