Генератор 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 (горизонталь): положительные значения двигают тень вправо, отрицательные — влево
• Смещение Y (вертикаль): положительные значения двигают тень вниз, отрицательные — вверх
• Радиус размытия: чем больше значение, тем сильнее размытие. 0 — резкая тень
• Радиус распространения: положительные значения расширяют тень, отрицательные — сужают
• Цвет: любое значение цвета 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. Визуально будет так же, но работать станет заметно быстрее, особенно на мобильных устройствах!