Kako ustvarim CSS box-shadow in kopiram kodo?

Prilagodite drsnike za odmik x in y, zameglitev, razširitev, Barva in prosojnost ter opazujte predogled v živo. Nato v izpisu CSS pritisnite Kopiraj. Začnete lahko tudi s Prednastavitve, kot so Mehka, Sijaj ali Material 8.

Ali lahko na en element naložim več senc?

Da. Pritisnite + Dodaj plast sence, da dodate več plasti, nato jih prerazporedite, Skrij ali Odstrani vsako posebej. Plasti so v eni vrednosti box-shadow združene z vejicami.

Kako naredim notranjo senco?

Izberite plast in vklopite Notranja senca ali naložite prednastavitev Notranja. Izpis nato za to plast vključuje ključno besedo inset.

Ali lahko namesto navadnega CSS dobim razred Tailwind?

Da. Poleg deklaracije CSS orodje izpiše tudi poljubni razred Tailwind v obliki shadow-[...], kjer so presledki zamenjani s podčrtaji, pripravljen za prilepljanje v vašo kodo.

Ali obstaja lažji način za nastavitev položaja sence kot z drsniki?

Da. Povlecite polje za predogled, da premaknete senco aktivne plasti, in držite Shift za natančen nadzor. Spremenite lahko tudi Predogled ozadja in Barva okvirja, da vidite, kako senca izgleda na vašem dizajnu.

Ali je res brezplačno?

Da. Vsako orodje je brezplačno za uporabo, brez računa in kreditne kartice. Delo poteka na vaši napravi in ne na naših strežnikih, kar omogoča brezplačno delovanje.

Ali deluje na mobilniku?

Da. Deluje v sodobnih mobilnih brskalnikih na iOS in Androidu, brez namestitve.

🎨

Generator senčenja polj CSS — brezplačno

Vizualni gradnik za CSS box-shadow z živim predogledom, večplastnim zlaganjem, izbiralnikom barv, preklopo vstavka in kopiranjem z enim klikom. Vključuje prednastavitve Material, neumorfizma in sijaja.

Deluje v vašem brskalnikuBrez registracije, brez pojavnih okenPrijava ni potrebnaBrezplačno za vedno

Deluje brez povezave po nalaganju

Predogled ozadja

Povlecite polje, da postavite senco aktivnega sloja - držite Shift za natančno kontrolo

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

Prednastavitve

Barva okvirja

Polmer roba (16px)

x (0px)

y (4px)

zameglitev (12px)

razširitev (0px)

Barva

Prosojnost (15%)

Notranja senca

Pogosta področja uporabe

Sence kartic UIZgradite elegantne sence kartic za nadzorne plošče, mrežice izdelkov in nadzorne plošče.
Učinki pritiska gumbaZgradite sence gumba, ki posnemajo globino in stanja pritiska iz resničnega sveta.
Neumorphism Soft UIUstvarite videz mehke UI neumorphism s pare svetlimi + temnimi senčami.
Modal & Popover senceUstvarite dvignjen, plavajoč občutek za pogovore in spustne menije.
Učinki sijaja in žarišča prstanaUstvarite bleščeče učinke poudarjanja, žariščne prstane in neon-slogovne poudarke.

Kako deluje

Generator box-shadow je popolnoma odjemalsko React orodje — brez strežnika, brez knjižnice. Vzdržuje seznam predmetov plasti senc v stanju, ob vsaki spremembi sestavi veljavne nize CSS box-shadow z uporabo ročno napisanega formatirja rgba() in jih uporabi neposredno na elementu predogleda prek React lastnosti style, tako da lastni pogon izrisovanja brskalnika takoj nariše rezultat.

1
Parametri plasti napajajo formatirnik
Vsaka plast sence shranjuje odmike x/y, zamegljenost, razprostiranje, šestnajstiško barvo in vrednost prosojnosti. Ob vsaki spremembi majhna funkcija shadowToCss pretvori šestnajstiško barvo v komponente RGB z regularnim izrazom, nato sestavi niz rgba() — na primer 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Več plasti je povezanih z vejicami.
2
Brskalnik izriše živ predogled
Sestavljen niz je dodeljen lastnosti sloga boxShadow elementa div neposredno v JSX. React posodobi atribut DOM, CSS pogon brskalnika pa takoj nariše senco — ni vpletenega platna ali WebGL, le nativno izrisovanje CSS.
3
Vlečenje za pozicioniranje uporablja Pointer Events API
Klik in vlečenje predogledne škatle kliče setPointerCapture na elementu, nato sledi razlikam onPointerMove za posodobitev odmikov x in y aktivne plasti v realnem času. Držanje tipke Shift uporabi faktor merila 0,25x za natančno pozicioniranje.
4
Izpis se kopira v odložišče
Orodje iz istih podatkov plasti ustvari dve izhodni obliki: standardno deklaracijo CSS box-shadow in razred Tailwind s poljubno vrednostjo (shadow-[...]), kjer so presledki zamenjani s podčrtaji po pravilih skladnje Tailwind. Kopiranje z enim klikom uporablja navigator.clipboard.writeText.