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

Подесите клизаче да бисте направили падајућу или унутрашњу сенку на пољу за преглед, а затим копирајте генерисани box-shadow CSS код. Контролишите хоризонтални и вертикални померај, радијус замућења, радијус ширења, боју и провидност — без потребе да памтите редослед аргумената или ручно претварате боје у rgba().

Šta je ovaj alat?

box-shadow је CSS својство које исцртава сенку иза (или унутар) елемента. Када се пише ручно, узима до пет вредности по редоследу — хоризонтални померај, вертикални померај, радијус замућења, радијус ширења и боју — плус опциону кључну реч inset, а све то је лако замешати или добити превише слабо/превише јако при првом покушају.

Овај алат то претвара у директну манипулацију: превуците клизач, посматрајте како се сенка мења на живом пољу за преглед, и копирајте тачан CSS код чим изгледа како треба. Бирач боје заједно са клизачем провидности аутоматски генерише исправну rgba() вредност, јер провидне сенке углавном изгледају боље од потпуно непровидних.

Zašto ga koristiti?

Живи преглед се тренутно ажурира при свакој промени — видите тачну сенку пре него што је уградите у код.
Потпуна контрола над хоризонталним и вертикалним померајем, замућењем, ширењем, бојом и провидношћу на једном месту.
Један клик додаје inset за утиснут изглед уместо лебдеће падајуће сенке.
Даје CSS код спреман за лепљење, са бојом већ претвореном у rgba() уз изабрану провидност.
Ради у потпуности у вашем прегледачу — ништа што подесите се никуда не шаље.
Бесплатно, без регистрације, ради и на мобилним уређајима.

Kako se koristi

Поставите X и Y померај да бисте позиционирали сенку — позитивне вредности је померају удесно/надоле, негативне удево/нагоре.
Повећајте радијус замућења да омекшате ивицу сенке; повећајте ширење да сенка буде већа од самог елемента.
Изаберите боју и подесите провидност — већина реалистичних сенки користи 15–40% провидности уместо пуне црне.
Штиклирајте 'inset' ако желите да се сенка појави унутар ивице елемента уместо иза ње.
Копирајте генерисани CSS код и налепите га у своју стилску датотеку.

Primer

Unos

Померај: 0px, 10px · Замућење: 20px · Ширење: 0px · Боја: црна са 35% провидности

Rezultat

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 декларације заједно.

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

Često postavljana pitanja

Која је разлика између замућења и ширења?

Радијус замућења омекшава ивицу сенке — веће вредности је постепеније гасе. Радијус ширења мења величину сенке пре примене замућења — позитивно ширење чини сенку већом од елемента са свих страна, негативно је смањује. Већина свакодневних сенки користи замућење док ширење остаје на 0.

Зашто користити rgba() уместо обичне hex боје за сенку?

Потпуно непровидна сенка изгледа оштро и нереалистично — стварне сенке су увек донекле провидне, тако да оно што је иза њих делимично прозирe. rgba() омогућава директно подешавање те провидности, због чега овај алат увек даје боју са алфа вредношћу уместо пуне hex боје.

Шта ради кључна реч inset?

Без inset, сенка се исцртава изван ивице елемента, као да елемент лебди изнад странице. Са inset, сенка се уместо тога исцртава унутар ивице, због чега елемент изгледа притиснуто или утиснуто — уобичајено се користи за активна/притиснута стања дугмади или поља за унос.

Да ли могу да наслажем више од једне сенке на истом елементу?

Да — CSS box-shadow прихвата листу одвојену зарезима, а прегледачи их приказују редоследом који сте навели (прва сенка је на врху). Уобичајена техника комбинује уску, тамнију сенку са широм, мекшом сенком за реалистичнију дубину него што било која од њих сама пружа.

Да ли box-shadow утиче на распоред или само на изглед?

Само на изглед — box-shadow никада не утиче на величину елемента нити на позицију околних елемената, чак ни са великим вредностима замућења или ширења. Ако сенка делује визуелно одсечено, проверите да ли на родитељском елементу постоји overflow: hidden, а не саме вредности сенке.