Генератор на box-shadow

Настройте плъзгачите, за да изградите падаща сянка или вътрешна сянка върху полето за преглед, след което копирайте генерирания CSS код за box-shadow. Управлявайте хоризонтално и вертикално отместване, радиус на размазване, радиус на разпръскване, цвят и прозрачност — без да е нужно да помните реда на аргументите или да преобразувате цветовете в rgba() ръчно.

Какво представлява този инструмент?

box-shadow е CSS свойство, което рисува сянка зад (или вътре в) елемент. Написано ръчно, то приема до пет стойности в определен ред — хоризонтално отместване, вертикално отместване, радиус на размазване, радиус на разпръскване и цвят — плюс незадължителната ключова дума inset, като всичко това лесно се обърква или излиза твърде слабо/твърде силно при първия опит.

Този инструмент превръща това в директно манипулиране: плъзнете плъзгач, наблюдавайте как сянката се променя в живото поле за преглед, и копирайте точния CSS код, щом изглежда добре. Избраният цвят плюс плъзгач за прозрачност автоматично генерират правилна стойност rgba(), тъй като прозрачните сенки обикновено изглеждат по-добре от напълно плътните.

Защо да го използвате?

Живият преглед се обновява моментално при всяка промяна — вижте точната сянка, преди да я вградите в кода.
Пълен контрол върху хоризонтално и вертикално отместване, размазване, разпръскване, цвят и прозрачност на едно място.
Едно кликване добавя inset за вдлъбнат вид вместо плаваща падаща сянка.
Извежда готов за поставяне CSS код с вече преобразуван цвят в rgba() при избраната от вас прозрачност.
Работи изцяло във вашия браузър — нищо от това, което настройвате, не се качва никъде.
Безплатен, без регистрация, работи и на мобилни устройства.

Как да го използвате

Задайте отместване по X и Y, за да позиционирате сянката — положителните стойности я местят надясно/надолу, отрицателните — наляво/нагоре.
Увеличете радиуса на размазване, за да омекотите ръба на сянката; увеличете разпръскването, за да направите сянката по-голяма от самия елемент.
Изберете цвят и настройте прозрачността — повечето реалистични сенки използват 15–40% прозрачност вместо плътно черно.
Отметнете 'inset', ако искате сянката да се появи вътре в границата на елемента, вместо зад нея.
Копирайте генерирания CSS код и го поставете в своя стилов файл.

Пример

Вход

Отместване: 0px, 10px · Размазване: 20px · Разпръскване: 0px · Цвят: черно при 35% прозрачност

Резултат

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

Мека сянка точно под елемента без хоризонтално отместване — един от най-често срещаните стилове за сенки на карти/бутони.

Единична сянка срещу наслоени сенки

Този инструмент изгражда един слой сянка, което покрива огромната част от реалните случаи на употреба — бутони, карти, модални прозорци и падащи менюта почти винаги използват само една сянка. CSS поддържа и множество сенки, разделени със запетая, за по-сложни ефекти на дълбочина (например тясна, тъмна сянка, наслоена под мека, широка сянка), но това е усъвършенстване, което можете да добавите ръчно: генерирайте една сянка тук, след което дублирайте реда, коригирайте втория набор стойности и ги свържете със запетая.

Често срещани модели на box-shadow

Леко повдигане на карта: малко отместване (0–4px), умерено размазване (8–16px), черно при 10–20% прозрачност.
Повдигнат модален прозорец/падащо меню: по-голямо отместване (4–10px) и размазване (20–30px), 20–35% прозрачност за по-силно усещане за плаване.
Натиснат/вдлъбнат бутон: отметнете inset, използвайте малко „отрицателно“ на усещане отместване и умерено размазване, така че сянката да се възприема като вдлъбнатина, а не като повдигане.
Цветно сияние: изберете цвят на марката вместо черно, увеличете прозрачността до 40–60% и леко увеличете разпръскването за мек ефект на сияние около бутоните.
Остра/твърда сянка: задайте размазване на 0 и разпръскване на 0 за плътен, изместен силует вместо мека сянка.

Комбиниране със заоблени ъгли

Сенките и заоблените ъгли се използват заедно постоянно — карти, бутони и модални прозорци почти винаги комбинират и двете. Използвайте генератора на радиус на границата, за да заоблите ъглите на същия елемент, след което приложете двете генерирани CSS декларации заедно.

→ Генератор на радиус на границата

Често задавани въпроси

Каква е разликата между размазване и разпръскване?

Радиусът на размазване омекотява ръба на сянката — по-високите стойности я карат да избледнява по-плавно. Радиусът на разпръскване променя размера на сянката преди размазването — положителна стойност прави сянката по-голяма от елемента от всички страни, отрицателна я свива. Повечето ежедневни сенки използват размазване, докато разпръскването остава 0.

Защо да се използва rgba() вместо обикновен hex цвят за сянката?

Напълно непрозрачната сянка изглежда рязка и нереалистична — реалните сенки винаги са донякъде прозрачни, оставяйки това зад тях леко да прозира. rgba() позволява директно задаване на тази прозрачност, затова този инструмент винаги извежда цвета с алфа стойност, а не с плътен hex.

Какво прави ключовата дума inset?

Без inset сянката се рисува извън границата на елемента, сякаш той се рее над страницата. С inset сянката се рисува вътре в границата, което кара елемента да изглежда натиснат или вдлъбнат — често се използва за активни/натиснати състояния на бутони или полета за въвеждане.

Мога ли да наслагвам повече от една сянка върху един и същ елемент?

Да — CSS свойството box-shadow приема списък, разделен със запетая, и браузърите ги изобразяват в дадения ред (първата сянка е отгоре). Често срещана техника наслагва тясна, по-тъмна сянка с по-широка, по-мека, за по-реалистична дълбочина, отколкото която и да е от двете сама по себе си.

Влияе ли box-shadow на оформлението, или само на визуалния вид?

Само на визуалния вид — box-shadow никога не влияе на размера на елемента или позицията на съседните елементи, дори при големи стойности на размазване или разпръскване. Ако сянката изглежда визуално отрязана, проверете за overflow: hidden на родителски елемент, а не стойностите на самата сянка.