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

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

🎨 Безкоштовний генератор CSS box-shadow і border-radius з живим попереднім переглядом. Створюйте красиві тіні, заокруглені кути та сучасні UI-ефекти. Готовий код для вебдизайну — копіюйте й вставляйте.

Властивість Box Shadow

Властивість CSS box-shadow додає ефекти тіні навколо рамки елемента. Можна задавати кілька ефектів, розділяючи їх комами. Тінь описується зміщеннями X і Y відносно елемента, радіусом розмиття та розповсюдження, а також кольором.

Синтаксис: box-shadow: [inset] [x-offset] [y-offset] [blur-radius] [spread-radius] [color];

Параметри тіні

• X-Offset (горизонтально): додатні значення зміщують тінь праворуч, від’ємні — ліворуч
• Y-Offset (вертикально): додатні значення зміщують тінь вниз, від’ємні — вгору
• Blur Radius: більші значення дають сильніше розмиття. 0 — різка тінь
• Spread Radius: додатні значення розширюють тінь, від’ємні — звужують
• Color: будь-яке значення кольору CSS (hex, rgb, rgba, hsl)
• Inset: робить тінь внутрішньою замість зовнішньої

Властивість Border Radius

Властивість border-radius заокруглює кути зовнішнього краю рамки елемента. Можна задати один радіус для круглих кутів або два радіуси для еліптичного заокруглення.

Синтаксис: border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

Поширені сценарії використання

• Картки: легка тінь (0 4px 6px rgba(0,0,0,0.1)) із середнім радіусом (8px)
• Кнопки: кольорова тінь у тон кнопки для ефекту глибини
• Модальні вікна: велика тінь (0 20px 25px rgba(0,0,0,0.15)) для ефекту «паріння»
• Зображення: круглі аватари (border-radius: 50%) або заокруглені мініатюри (8–16px)
• Поля введення: внутрішня тінь для стану натиснення/фокусу
• Неоморфний дизайн: кілька тіней (світла й темна) під фон

Найкращі практики для тіней

• Використовуйте м’які тіні: зазвичай 10–20% непрозорості достатньо для глибини
• Y-offset > X-offset: імітує природне світло зверху
• Більше розмиття для «висоти»: більше blur = виглядає вище над сторінкою
• Підбирайте колір тіні: використовуйте колір елемента з низькою непрозорістю для цілісності
• Продуктивність: уникайте анімації box-shadow, краще анімувати opacity або transform

Популярні стилі тіней

• Material Design: 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.14)
• Tailwind SM: 0 1px 2px 0 rgba(0,0,0,0.05)
• Tailwind MD: 0 4px 6px -1px rgba(0,0,0,0.1)
• Tailwind LG: 0 10px 15px -3px rgba(0,0,0,0.1)
• Bootstrap: 0 0.5rem 1rem rgba(0,0,0,0.15)

Шаблони заокруглення кутів

• Немає (0px): гострі кути, сучасний мінімалізм
• Мале (4px): легке заокруглення для полів введення, кнопок
• Середнє (8px): стандарт для карток, контейнерів
• Велике (16px+): дружній, «м’який» вигляд
• Капсула (999px або 50%): заокруглені краї для тегів, бейджів
• Коло (50%): аватари, іконки-кнопки (потрібен квадратний елемент)

Просунуті техніки

• Кілька тіней: поєднуйте тіні для багатошарових ефектів
• Ефект світіння: 0 0 20px [color] без зміщення
• Неоморфізм: світла тінь зверху-ліворуч, темна тінь знизу-праворуч
• Кільця фокусу: кольорова тінь для доступності (0 0 0 3px rgba(color,0.5))
• 3D-ефект: кілька тіней зі зростанням зміщення та розмиття

Підтримка браузерів

Box-shadow і border-radius підтримуються всіма сучасними браузерами. Для IE8 і старіших можна використовувати префікси (-webkit-box-shadow, -moz-box-shadow), хоча сьогодні це рідко необхідно.

💡 Порада: для hover-ефектів не анімуйте box-shadow напряму — це дорого за продуктивністю. Краще створіть тінь на псевдоелементі (::before або ::after) і анімуйте його opacity. Візуально буде так само, але працюватиме значно швидше, особливо на мобільних пристроях!