Як стварыць CSS box-shadow і скапіяваць код?

Наладзьце паўзункі зруху па X і Y, размыцця, распаўсюджвання, Колеру і непразрыстасці, назіраючы за папярэднім праглядам. Затым націсніце Скапіяваць у блоку вываду CSS. Таксама можна пачаць з Шаблонаў, такіх як Мяккі, Свячэнне або Material 8.

Ці магу я накласці некалькі ценяў на адзін элемент?

Так. Націсніце + Дадаць пласт ценю, каб дадаць больш слаёў, затым змяняйце іх парадак, Хавайце або Выдаляйце кожны. Слаі аб'ядноўваюцца коскамі ў адным значэнні box-shadow.

Як зрабіць унутраны цень?

Выберыце пласт і ўключыце Унутраны цень або загрузіце шаблон Унутраны. У вывадзе для гэтага пласта з'явіцца ключавое слова inset.

Ці магу я атрымаць клас Tailwind замест звычайнага CSS?

Так. Акрамя дэкларацыі CSS, інструмент выводзіць адвольны клас Tailwind у выглядзе shadow-[...], дзе прабелы заменены на падкрэсліванні, гатовы для ўстаўкі ў вашу разметку.

Ці ёсць больш просты спосаб задаць пазіцыю ценю, чым паўзункі?

Так. Перацягніце поле папярэдняга прагляду, каб перамясціць цень актыўнага пласта, і ўтрымлівайце Shift для дакладнага кантролю. Вы таксама можаце змяніць Папярэднюю праглядка фона і Колер блока, каб убачыць, як цень выглядае на вашым дызайне.

Гэта сапраўды бясплатна?

Так. Кожны інструмент бясплатны, без уліковага запісу і банкаўскай карты. Праца выконваецца на вашай прыладзе, а не на нашых серверах, што і дазваляе заставацца бясплатным.

Ці працуе гэта на мабільным тэлефоне?

Так. Працуе ў сучасных мабільных браўзерах на iOS і Android, нічога ўсталёўваць не трэба.

🎨

Генератар 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%)

Унутраная цень

Тыповыя выкарыстанні

Card UI цяніПабудуйце элегантныя цяні карточак для інструмэнтаў, сеткі прадуктаў і інструмантаў.
Эфекты Button PressПабудуйце цяні кнопак, якія падобны на рэальнамерную глыбіню і стаў прэса.
Neumorphism Soft UIСтварыце гляд мяккага UI neumorphism з парамі cвятлаж + цёмныя цяні.
Маўдальныя & 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 браўзера адразу малюе цень — тут не задзейнічаны ні канвас, ні WebGL, толькі нацыўны рэндэрынг CSS.
3
Перацягванне для пазіцыянавання выкарыстоўвае Pointer Events API
Пстрычка і перацягванне блока папярэдняга прагляду выклікае setPointerCapture на элеменце, потым адсочвае дэльты onPointerMove, каб абнаўляць зрухі x і y актыўнага слоя ў рэальным часе. Утрыманне Shift прымяняе каэфіцыент маштабу 0.25x для дробнага пазіцыянавання.
4
Вывад капіруецца ў буфер абмену
Інструмент вырабляе два фарматы вываду з тых жа дадзеных слаёў: стандартную дэкларацыю CSS box-shadow і клас адвольнага значэння Tailwind (shadow-[...]), дзе прабелы замяняюцца падкрэсліваннямі згодна з правіламі сінтаксісу Tailwind. Капіраванне ў адзін клік выкарыстоўвае navigator.clipboard.writeText.