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

Juster skyderne for x- og y-forskydning, sløring, spredning, Farve og opacitet, mens du ser live-forhåndsvisningen. Tryk derefter på Kopiér i CSS-outputtet. Du kan også starte fra Forudindstillinger som Blød, Glød eller Material 8.

Kan jeg stable flere skygger på ét element?

Ja. Tryk på + Tilføj endnu et skyggelag for at tilføje flere lag, og omarrangér, Skjul eller Fjern dem derefter. Lagene sammenkædes med kommaer i en enkelt box-shadow-værdi.

Hvordan laver jeg en indre skygge?

Vælg et lag og slå Indre skygge til, eller indlæs forudindstillingen Indad. Outputtet inkluderer derefter nøgleordet inset for det pågældende lag.

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

Ja. Ud over CSS-deklarationen genererer værktøjet en Tailwind arbitrary-value-klasse i formen shadow-[...], hvor mellemrum erstattes med understregninger, klar til at indsætte i din markup.

Er der en nemmere måde at indstille skyggepositionen på end med skyderne?

Ja. Træk i forhåndsvisningsboksen for at flytte det aktive lags skygge, og hold Shift nede for finjustering. Du kan også ændre Forhåndsvisningsbaggrund og Boksfarve for at se, hvordan skyggen ser ud i dit design.

Er det virkelig gratis?

Ja. Alle værktøjer er gratis at bruge, uden konto og uden kreditkort. Arbejdet foregår på din enhed i stedet for på vores servere, hvilket er det, der gør det gratis at køre.

Virker det på mobil?

Ja. Det kører i nuværende mobilbrowsere på iOS og Android, uden noget at installere.

🎨

Gratis CSS Box Shadow-generator

Visuel builder til CSS box-shadow med liveforhåndsvisning, flerlags-stabling, farvevælger, inset-skift og ét-klik-kopiering. Inkluderer Material-, neumorfisme- og glow-forudindstillinger.

Kører i din browserIngen tilmelding, ingen pop-upsIngen login krævetGratis for altid

Virker offline, når den er indlæst

Forhåndsvisningsbaggrund

Træk kassen for at positionere det aktive lags skygge - hold Shift for finkontrol

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

Forudindstillinger

Boksfarve

Hjørneradius (16px)

x (0px)

y (4px)

sløring (12px)

spredning (0px)

Farve

Opacitet (15%)

Indre skygge

Almindelige anvendelser

Kort UI-skyggerByg elegante kort skygger til instrumentpaneler, produktgitter og instrumentpaneler.
KnappetrykseffekterByg knappeskygger, der efterligner virkeligverdens dybde og tryktilstande.
Neumorphism blød UISkab det bløde-UI neumorphism-udseende med parrede lys + mørke skygger.
Modal & Popover-skyggerSkab det hævede, flydende følelse for dialoger og dropdowns.
Gløde- og fokusringeffekterOpret glødende accenteffekter, fokusringe og neon-lignende højdepunkter.

Sådan fungerer det

Box-shadow-generatoren er et React-værktøj, der kører helt på klientsiden — ingen server, intet bibliotek. Den holder en liste over skyggelag-objekter i state, samler gyldige CSS box-shadow-strenge ved hver ændring med en håndskrevet rgba()-formatering og anvender dem direkte på et forhåndsvisningselement via Reacts style-prop, så browserens egen tegnemotor viser resultatet med det samme.

1
Lagparametre sendes til formateringen
Hvert skyggelag gemmer x/y-forskydning, sløring, spredning, en hex-farve og en opacitetsværdi. Ved hver ændring omsætter en lille shadowToCss-funktion hex-farven til RGB-komponenter med et regex og samler derefter rgba()-strengen — for eksempel 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Flere lag sammenføjes med kommaer.
2
Browseren tegner live-forhåndsvisningen
Den samlede streng tildeles boxShadow-stilegenskaben på et div-element direkte i JSX. React opdaterer DOM-attributten, og browserens CSS-motor maler skyggen straks — der indgår intet canvas eller WebGL, kun indbygget CSS-gengivelse.
3
Træk for at placere bruger Pointer Events API
Når du klikker og trækker i forhåndsvisningsboksen, kaldes setPointerCapture på elementet, og onPointerMove-ændringer følges for at opdatere det aktive lags x- og y-forskydning i realtid. Holder du Shift nede, anvendes en skalafaktor på 0,25x til finjustering.
4
Outputtet kopieres til udklipsholderen
Værktøjet laver to outputformater ud fra de samme lagdata: en almindelig CSS box-shadow-deklaration og en Tailwind-klasse med vilkårlig værdi (shadow-[...]), hvor mellemrum erstattes af understregninger efter Tailwinds syntaksregler. Kopiering med ét klik bruger navigator.clipboard.writeText.