🎨

Бесплатен Генератор на CSS box-shadow

Визуелен алат за CSS box-shadow со преглед во живо, наредување повеќе слоеви, бирач на бои, вклучување на внатрешна сенка и копирање со еден клик. Вклучува претходно поставени опции за Material, неуморфизам и сјај.

Работи во вашиот прелистувачБез регистрација, без скокачки прозорциНе е потребно најавувањеБесплатно засекогаш

Работи офлајн откако ќе се вчита

Позадина на прегледот

Влечете го полето за да ја поставите сенката на активниот слој - држете Shift за прецизна контрола

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Предефинирани

Боја на кутијата

Радиус на рамка (16px)

x (0px)

y (4px)

заматување (12px)

ширење (0px)

Боја

Непроѕирност (15%)

Внатрешна сенка

Како функционира

Генераторот на box-shadow е целосно клиентска React алатка — без сервер, без библиотека. Одржува листа од објекти за слоеви на сенка во состојба, составува важечки CSS box-shadow низи при секоја промена користејќи рачно напишан форматор rgba(), и ги применува директно на елемент за преглед преку атрибутот style на React за самиот механизам за исцртување на прелистувачот веднаш да го исцрта резултатот.

1
Параметрите на слојот го хранат форматорот
Секој слој на сенка чува отстапувања x/y, заматување, ширина, хекс боја и вредност на проѕирност. При секоја промена, мала функција shadowToCss ја конвертира хекс бојата во RGB компоненти со регуларен израз, потоа ја составува rgba() низата — на пример, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Повеќе слоеви се спојуваат со запирки.
2
Прелистувачот го исцртува прегледот во живо
Составената низа се доделува на својството на стилот boxShadow на div елемент директно во JSX. React ги ажурира атрибутите на DOM, а CSS механизмот на прелистувачот веднаш ја боји сенката — не е вклучен canvas или WebGL, само природно CSS исцртување.
3
Повлекувањето за позиционирање ја користи Pointer Events API
Кликнувањето и повлекувањето на кутијата за преглед повикува setPointerCapture на елементот, потоа ги следи промените на onPointerMove за да ги ажурира отстапувањата x и y на активниот слој во реално време. Држењето на Shift применува фактор на скала 0,25x за прецизно позиционирање.
4
Излезот се копира во клипбордот
Алатката произведува два излезни формата од истите податоци за слојот: стандардна CSS декларација box-shadow, и Tailwind класа со произволна вредност (shadow-[...]) каде празните места се заменети со долни црти според правилата на синтаксата на Tailwind. Копирањето со едно кликнување ја користи navigator.clipboard.writeText.