Как да създам CSS box-shadow и да копирам кода?

Настройте плъзгачите за отместване по x и y, размазване, разпространение, Цвят и непрозрачност, като наблюдавате визуализацията на живо. След това натиснете Копирай в изхода с CSS. Можете също да започнете от Предварително зададени като Мека, Сияние или Material 8.

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

Да. Натиснете + Добавяне на слой сянка, за да добавите още слоеве, след което ги пренаредете, Скриване или Премахни всеки от тях. Слоевете се обединяват със запетаи в една стойност за box-shadow.

Как да направя вътрешна сянка?

Изберете слой и включете Вътрешна сянка или заредете предварително зададената настройка Inset. Изходът тогава включва ключовата дума inset за този слой.

Мога ли да получа Tailwind клас вместо обикновен CSS?

Да. Освен CSS декларацията, инструментът извежда Tailwind клас с произволна стойност във формата shadow-[...], като интервалите са заменени с долни черти, готов за поставяне във вашия код.

Има ли по-лесен начин за задаване на позицията на сянката освен плъзгачите?

Да. Плъзнете полето за визуализация, за да преместите сянката на активния слой, и задръжте Shift за фин контрол. Можете също да промените Предварителен преглед на фона и Цвят на полето, за да видите как изглежда сянката върху вашия дизайн.

Наистина ли е безплатно?

Да. Всеки инструмент е безплатен, без акаунт и кредитна карта. Работата се извършва на вашето устройство, а не на наши сървъри, което позволява да бъде безплатна.

Работи ли на мобилни устройства?

Да. Работи в съвременните мобилни браузъри на iOS и Android, без да инсталирате нищо.

🎨

Генератор на CSS box-shadow — безплатно

Визуален конструктор за CSS box-shadow с жив преглед, наслагване на множество слоеве, избор на цвят, превключване на inset и копиране с едно кликване. Включва предварителни настройки за Material, ньоморфизъм и glow.

Работи в браузъраБез регистрация, без изскачащи прозорциНе се изисква входБезплатно завинаги

Работи офлайн след зареждане

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

Преместете полето, за да позиционирате сянката на активния слой - задръжте Shift за фина управа

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

Предварително зададени

Цвят на полето

Закръгляне на ъглите (16px)

x (0px)

y (4px)

замъгляване (12px)

разпространение (0px)

Цвят

Непрозрачност (15%)

Inset сянка

Често срещани употреби

Карта UI сенкиИзградете елегантни сенки на карти за табла, мрежи на продукти и табла.
Ефекти на натискане на бутонаИзградете сенки на бутона, които имитират дълбочина и състояния на натискане от реалния свят.
Neumorphism мека UIСъздайте мек UI neumorphism вид с сдвоени светли + тъмни сенки.
Modal & Popover сенкиСъздайте издигнат, плаващ усещане за диалози и падащи меню.
Ефекти на светене и фокусиран пръстенСъздавайте светещи акцентни ефекти, фокусни пръстени и неонови светлини.

Как работи

Генераторът на box-shadow е напълно клиентски React инструмент — без сървър, без библиотека. Той поддържа списък от обекти на слоеве сенки в състоянието, сглобява валидни низове CSS box-shadow при всяка промяна чрез ръчно написан форматиращ инструмент за rgba(), и ги прилага директно към елемент за преглед чрез стил свойството на 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.