Hvordan lager jeg en CSS box-shadow og kopierer koden?

Juster glidebryterne for x- og y-forskyvning, uskarphet, spredning, Farge og opasitet mens du ser på forhåndsvisningen. Trykk deretter Kopier i CSS-utdataene. Du kan også starte fra Forhåndsinnstillinger som Myk, Glød eller Material 8.

Kan jeg stable flere skygger på ett element?

Ja. Trykk + Legg til skyggelag for å legge til flere lag, og endre deretter rekkefølgen, Skjul eller Fjern hvert enkelt. Lagene settes sammen med komma i én enkelt box-shadow-verdi.

Hvordan lager jeg en innfelt skygge?

Velg et lag og slå på Innfelt skygge, eller last inn forhåndsinnstillingen Innfelt. Utdataene inkluderer da nøkkelordet inset for det laget.

Kan jeg få en Tailwind-klasse i stedet for vanlig CSS?

Ja. I tillegg til CSS-deklarasjonen gir verktøyet en Tailwind-klasse med vilkårlig verdi på formen shadow-[...], der mellomrom er erstattet med understrek, klar til å limes inn i koden din.

Finnes det en enklere måte å angi skyggeposisjonen på enn glidebryterne?

Ja. Dra i forhåndsvisningsboksen for å flytte det aktive lagets skygge, og hold nede Shift for finjustering. Du kan også endre Bakgrunn for forhåndsvisning og Boksfarge for å se hvordan skyggen ser ut i designet ditt.

Er det virkelig gratis?

Ja. Alle verktøy er gratis å bruke, uten konto og uten kredittkort. Arbeidet utføres på enheten din i stedet for på våre servere, noe som gjør det gratis å kjøre.

Fungerer det på mobil?

Ja. Det fungerer i moderne mobilnettlesere på iOS og Android, uten at du trenger å installere noe.

🎨

Gratis CSS box-shadow-generator

Visuelt verktøy for CSS box-shadow med forhåndsvisning i sanntid, stabling av flere lag, fargevelger, inset-bryter og kopiering med ett klikk. Inkluderer forhåndsinnstillinger for Material, neumorfisme og glød.

Kjører i nettleserenIngen registrering, ingen popup-vinduerIngen pålogging krevesGratis for alltid

Fungerer uten nett når den er lastet

Bakgrunn for forhåndsvisning

Dra boksen for å plassere skyggen på det aktive laget — hold Shift for fin kontroll

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

Forhåndsinnstillinger

Boksfarge

Hjørneradius (16px)

x (0px)

y (4px)

uskarphet (12px)

spredning (0px)

Farge

Opasitet (15%)

Innfelt skygge

Vanlige bruksområder

Kort UI-skyggerLag elegante kortskygger for instrumentbord, produktgitter og instrumentbord.
KnappetrykkeffekterLag knappskygger som etterligner virkelighetens dybde og trykkstillstander.
Neumorphism myk UILag den myke-UI neumorphism-utseendet med sammenkoblede lys + mørke skygger.
Modal- og Popover-skyggerLag den høye, flytende følelsen for dialoger og nedtrekk.
Glød- og fokusringeffekterLag gløde-aksenteffekter, fokusringer og neon-stileffekter.

Hvordan det fungerer

Box-shadow-generatoren er et helt klientbasert React-verktøy — ingen server, ingen bibliotek. Den holder en liste over skyggelag-objekter i state, setter sammen gyldige CSS box-shadow-strenger ved hver endring med en håndskrevet rgba()-formaterer, og bruker dem direkte på et forhåndsvisningselement via Reacts style-prop, slik at nettleserens egen tegnemotor viser resultatet umiddelbart.

1
Lagparametere mates inn i formatereren
Hvert skyggelag lagrer x/y-forskyvning, uskarphet, spredning, en heksadesimal farge og en gjennomsiktighetsverdi. Ved hver endring gjør en liten shadowToCss-funksjon den heksadesimale fargen om til RGB-komponenter med et regex og setter sammen rgba()-strengen — for eksempel 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Flere lag slås sammen med komma.
2
Nettleseren tegner live-forhåndsvisningen
Den sammensatte strengen tilordnes boxShadow-stilen til et div-element direkte i JSX. React oppdaterer DOM-attributtet, og nettleserens CSS-motor tegner skyggen umiddelbart — ingen canvas eller WebGL, bare innebygd CSS-gjengivelse.
3
Dra for å plassere bruker Pointer Events API
Når du klikker og drar i forhåndsvisningsboksen, kalles setPointerCapture på elementet, og onPointerMove-endringer spores for å oppdatere det aktive lagets x- og y-forskyvning i sanntid. Hold nede Shift for en skaleringsfaktor på 0,25x for finjustering.
4
Resultatet kopieres til utklippstavlen
Verktøyet lager to utdataformater fra de samme lagdataene: en standard CSS box-shadow-deklarasjon og en Tailwind-klasse med vilkårlig verdi (shadow-[...]) der mellomrom erstattes med understrek etter Tailwinds syntaksregler. Kopiering med ett klikk bruker navigator.clipboard.writeText.