0

CSS Box Shadow генератор

Създайте CSS box-shadow код визуално: плъзгачи за отместване, размазване, разпространение, цвят с прозрачност, режим inset и до четири слоя с превю на живо.

🔒 Обработва се изцяло във вашия браузър - нищо, което въвеждате тук, никога не се качва.

0px
4px
12px
0px
0.25
Обработка... 0%

Резултат

Една box-shadow декларация има шест движещи се части — отместване по X и Y, размазване, разпространение, цвят и незадължителната ключова дума inset — и единственият начин да ги настроите правилно е да ги виждате. Този генератор поставя всяка част върху плъзгач и показва резултата върху превю карта, докато плъзгате, така че CSS редът в долната част винаги е точно това, което виждате.

Реалните сенки рядко са единичен слой. Списъкът със слоеве ви позволява да наслоите до четири сенки в една декларация: плътна тъмна линия за дефиниция на ръба плюс широко меко измиване за височина, или светлата и тъмна двойка, която дефинира неуморфизма. Изберете слой, за да го редактирате, премахнете тези, които не ви трябват, и комбинираната стойност на box-shadow се актуализира на живо.

Сенките изглеждат много различно на тъмни интерфейси, където черна сянка върху почти черна страница просто изчезва. Превключвателят на фона на превюто сменя фона между светъл и тъмен, за да можете да проверите и двете теми преди публикуване. Предварително зададените страници покриват вариантите, които хората реално търсят: мека сянка за височина, вдлъбнато поле, рецептата за двуслоен неуморфизъм и ненатрапчива сянка за карта.

Както всеки инструмент на този сайт, генераторът е безплатен и работи изцяло във вашия браузър: няма качване, няма акаунт и продължава да работи офлайн, след като страницата се зареди.