CSS генератор на сянка (box-shadow) и радиус на рамката

Генератор на CSS сенки и радиуси на бордюри

🎨 Безплатен генератор за 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 (вертикално): Положителните стойности местят сянката надолу, отрицателните — нагоре
• Радиус на размазване: По-високи стойности дават по-силно размазване. 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)
• Полета за въвеждане: Inset сянка за натиснат/фокусиран вид
• Неуморфен дизайн: Множество сенки (светла и тъмна) с подходящ фон

Добри практики за сенки

• Използвайте дискретни сенки: Прозрачност 10–20% обикновено е достатъчна за дълбочина
• Y-offset > X-offset: Имитира естествена светлина отгоре
• По-голям blur за „повдигане“: Повече 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)

Шаблони за Border Radius

• Без (0px): Остри ъгли, модерен минималистичен вид
• Малък (4px): Леко заобляне за полета и бутони
• Среден (8px): Стандартно за карти и контейнери
• Голям (16px+): По-приятелски и „мек“ дизайн
• Капсула (999px или 50%): За тагове и бейджове със заоблени краища
• Кръг (50%): Аватари и бутони с икони (изисква квадратен елемент)

Разширени техники

• Множество сенки: Комбинирайте сенки за слоести ефекти
• Ефект „сияние“: 0 0 20px [цвят] без отместване
• Неуморфизъм: Светла сянка горе-вляво, тъмна долу-вдясно
• Focus ring: Цветна сянка за достъпност (0 0 0 3px rgba(color,0.5))
• 3D ефект: Множество сенки с увеличаващо се отместване и размазване

Поддръжка на браузъри

Box-shadow и border-radius се поддържат от всички модерни браузъри. За IE8 и по-стари може да се използват vendor префикси (-webkit-box-shadow, -moz-box-shadow), но това рядко е необходимо днес.

💡 Професионален съвет: За hover ефекти не анимирайте box-shadow директно, защото е „тежко“. Вместо това създайте сянката върху псевдо-елемент (::before или ::after) и анимирайте прозрачността му. Така получавате същия визуален ефект с много по-добра производителност, особено на мобилни устройства!