Генератор Box Shadow

Керуйте параметрами box-shadow за допомогою повзунків, комбінуйте шари для глибини та миттєво копіюйте готовий код CSS.

Шари тіней
Шар 1
CSS
Налаштуйте повзунки, щоб підібрати форму тіні.

Кожна тінь рендериться у вашому браузері. Жодні дані не завантажуються на BroBroGo.

Поширені запитання

За що саме відповідають зсув, розмиття та розтягування?

Зсув (offset) переміщує тінь ліворуч/праворуч та вгору/вниз, розмиття (blur) пом’якшує її краї, а розтягування (spread) збільшує або зменшує її розмір перед розмиттям. Від’ємне значення розтягування стискає тінь, що корисно для створення ефекту щільного прилягання.

Що робить опція inset?

Звичайна тінь падає зовні елемента, створюючи ефект піднятої картки. Опція Inset перевертає її всередину, завдяки чому елемент виглядає вдавленим — це корисно для полів введення або натиснутих кнопок.

Навіщо накладати кілька шарів тіней?

Одиночна тінь великого розміру часто виглядає пласкою та неприродною. Реалістична глибина зазвичай поєднує чітку темну тінь із м’якою та ширшою — додайте другий шар і налаштуйте кожен окремо для досягнення цього ефекту.

Написано та перевірено редакційною командою BroBroGo.Останнє оновлення:

Робота з властивістю CSS box-shadow

Властивість box-shadow у CSS призначена для додавання тіней до елементів розмітки. Вона дозволяє створювати візуальний об’єм, підкреслювати ієрархію інтерфейсу та відокремлювати важливі блоки від фону. За допомогою інструменту «Генератор Box Shadow» ви можете налаштовувати параметри тіней у реальному часі, спостерігаючи за змінами безпосередньо у браузері.

Генератор дозволяє керувати всіма ключовими параметрами властивості за допомогою повзунків, додавати або видаляти шари для створення складних ефектів та отримувати готовий код CSS для копіювання.

Параметри налаштування тіней

Кожен шар тіні описується набором числових та колірних параметрів, які визначають її поведінку на екрані:

  • Горизонтальний зсув: Цей повзунок переміщує тінь по осі X. Діапазон значень становить від -50px (тінь зміщується ліворуч) до 50px (тінь зміщується праворуч).
  • Вертикальний зсув: Цей повзунок переміщує тінь по осі Y. Діапазон значень становить від -50px (тінь зміщується вгору) до 50px (тінь зміщується вниз).
  • Розмиття: Визначає ступінь пом'якшення країв тіні. Значення регулюється від 0px (абсолютно чітка тінь) до 100px (максимально розмита, м'яка тінь).
  • Розтягування: Збільшує або зменшує лінійний розмір тіні перед тим, як буде застосовано розмиття. Діапазон регулювання — від -50px до 50px. Від’ємне значення розтягування стискає тінь, стягуючи її всередину.
  • Колір тіні: Спеціальний інструмент вибору кольору для встановлення відтінку тіні.
  • Прозорість: Регулює рівень прозорості тіні, роблячи її ледь помітною або насиченою.
  • Внутрішня тінь (inset): Перемикач, який змінює напрямок падіння тіні. Замість зовнішнього розташування тінь відображається всередині меж елемента.

Багатошарові тіні та правила генерації коду

Для створення реалістичних ефектів глибини часто недостатньо одного шару тіні. Інструмент підтримує роботу з кількома шарами одночасно:

  • Додати шар: Кнопка створює новий шар тіні з базовими параметрами за замовчуванням.
  • Видалити шар: Кнопка видаляє вибраний шар тіні зі списку.

Інструмент заздалегідь рендерить п'ять шарів. Перший шар має початкові налаштування за замовчуванням: горизонтальний зсув 0, вертикальний зсув 8, розмиття 24, розтягування -4 та чорний колір із прозорістю 18%. Інші чотири шари спочатку є прихованими.

Коли ви змінюєте параметри будь-якого шару, генератор миттєво оновлює вихідний код CSS. Якщо у проекті використовується кілька активних шарів, у фінальному CSS-коді вони перераховуються через кому.

Створення візуальних ефектів

Залежно від комбінації параметрів, ви можете досягати різних візуальних результатів для елементів інтерфейсу:

  1. Ефект піднятої картки: Створюється за допомогою невеликого вертикального зсуву, помірного розмиття та від'ємного значення розтягування. Це дозволяє отримати м'яку, широку тінь, яка імітує підняття елемента над поверхнею.
  2. Втиснутий елемент (Pressed-in): Використання опції Внутрішня тінь (inset) перевертає тінь всередину меж елемента. Це створює ілюзію заглиблення, що є стандартним рішенням для оформлення активних станів кнопок або полів введення тексту.
  3. Тонка та щільна тінь: Мінімальні значення розмиття та зсуву дозволяють чітко окреслити межі елемента, створюючи ефект щільного прилягання до фону.

Конфіденційність та обробка даних

Кожна тінь рендериться у вашому браузері. Жодні дані не завантажуються на BroBroGo. Усі обчислення та генерація коду відбуваються локально на вашому пристрої.

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

За що саме відповідають зсув, розмиття та розтягування?

Зсув (offset) переміщує тінь ліворуч/праворуч та вгору/вниз, розмиття (blur) пом’якшує її краї, а розтягування (spread) збільшує або зменшує її розмір перед розмиттям. Від’ємне значення розтягування стискає тінь, що корисно для створення ефекту щільного прилягання.

Що робить опція inset?

Звичайна тінь падає зовні елемента, створюючи ефект піднятої картки. Опція Inset перевертає її всередину, завдяки чому елемент виглядає вдавленим — це корисно для полів введення або натиснутих кнопок.

Навіщо накладати кілька шарів тіней?

Одиночна тінь великого розміру часто виглядає пласкою та неприродною. Реалістична глибина зазвичай поєднує чітку темну тінь із м’якою та ширшою — додайте другий шар і налаштуйте кожен окремо для досягнення цього ефекту.

Генератор CSS Cubic BezierКеруйте двома маркерами для створення кривої плавности, порівнюйте рух точок наживо та копіюйте готове значення cubic-bezier().Генератор градієнтівСтворюйте лінійні, радіальні або конічні градієнти, додавайте колірні точки, налаштовуйте напрямок та копіюйте CSS в один клік.Генератор Border RadiusЗаокруглюйте кожен кут повзунками, створюйте органічні асиметричні форми в еліптичному режимі та миттєво копіюйте CSS.Генератор FlexboxНалаштовуйте flex-контейнер та його елементи за допомогою візуальних інструментів, дивіться на результат наживо та копіюйте CSS в один клік.Генератор CSS GridЗадавайте кількість стовпців та рядків, виділяйте мишкою області для розміщення елементів та копіюйте готовий CSS та HTML-код.Калькулятор CSS clamp()Вкажіть розміри для малих і великих екранів та отримайте адаптивне значення clamp() для плавного масштабування шрифтів, відступів чи інтервалів.Конвертер кольорівКонвертуйте кольори між HEX, RGB, HSL, HSV, CMYK та LAB — змінюйте будь-яке поле, а інші оновлюватимуться на льоту.Форматування та мініфікація CSSВирівнюйте заплутаний CSS для зручного читання або мініфікуйте його для публікації — з безпечним режимом, який ніколи не змінює порядок правил.Перевірка контрастностіВведіть кольори тексту та фону, щоб дізнатися коефіцієнт контрастності WCAG та перевірити відповідність стандартам AA й AAA.