Генератор Box Shadow

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

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

Кожна тінь рендериться у вашому браузері. Жодні дані не завантажуються на 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.