Hur skapar jag en CSS-boxskugga och kopierar koden?

Justera reglagen för x- och y-förskjutning, oskärpa, spridning, Färg och opacitet och se förhandsvisningen i realtid. Tryck sedan på Kopiera i CSS-utmatningen. Du kan också börja från Förval som Mjuk, Glöd eller Material 8.

Kan jag stapla flera skuggor på ett element?

Ja. Tryck på + Lägg till skugglager för att lägga till fler lager, och ändra sedan ordningen, Dölj eller Ta bort varje lager. Lagren sammanfogas med kommatecken i ett enda box-shadow-värde.

Hur gör jag en inset-skugga?

Välj ett lager och aktivera Inset-skugga, eller ladda förvalet Inset. Utmatningen innehåller då nyckelordet inset för det lagret.

Kan jag få en Tailwind-klass istället för vanlig CSS?

Ja. Förutom CSS-deklarationen genererar verktyget en godtycklig Tailwind-klass i formen shadow-[...], där mellanslag ersätts med understreck, redo att klistras in i din kod.

Finns det ett enklare sätt att ställa in skuggans position än med reglagen?

Ja. Dra i förhandsvisningsrutan för att flytta det aktiva lagrets skugga, och håll ned Skift för finjustering. Du kan också ändra Förhandsvisning av bakgrund och Boxfärg för att se hur skuggan ser ut i din design.

Är det verkligen gratis?

Ja. Alla verktyg är gratis att använda, utan konto och utan kreditkort. Arbetet utförs på din enhet istället för på våra servrar, vilket är det som gör det gratis att köra.

Fungerar det på mobil?

Ja. Det fungerar i moderna mobilwebbläsare på iOS och Android, utan installation.

🎨

Gratis CSS-boxskuggegenerator

Visuell byggare för CSS box-shadow med liveförhandsvisning, flerlagersstapling, färgväljare, inset-växling och kopiering med ett klick. Inkluderar Material-, neumorfism- och glödförinställningar.

Körs i din webbläsareIngen registrering, inga popup-fönsterIngen inloggning krävsGratis för alltid

Fungerar offline när den väl lästs in

Förhandsvisning av bakgrund

Dra rutan för att positionera det aktiva lagrets skugga - håll Skift för finkontroll

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

Förval

Boxfärg

Hörnradie (16px)

x (0px)

y (4px)

oskärpa (12px)

spridning (0px)

Färg

Opacitet (15%)

Inset-skugga

Vanliga användningar

Kort UI-skuggorSkapa eleganta kort skuggor för instrumentpaneler, produktnät och instrumentpaneler.
Knappens presseffekterSkapa knappskuggor som efterliknar verkliga världens djup och presstillstånd.
Neumorphism mjuk UISkapa det mjuka-UI neumorphism-utseendet med parade ljusa + mörka skuggor.
Modal & Popover-skuggorSkapa det höjda, flytande känslan för dialoger och nedrullningsmenyer.
Glöd- och fokusringeffekterSkapa glödande accenteffekter, fokusringar och neon-liknande höjdpunkter.

Så här fungerar det

Generatorn för box-shadow är ett helt klientsidesbaserat React-verktyg — ingen server, inget bibliotek. Den håller en lista med skuggskiktsobjekt i state, bygger giltiga CSS box-shadow-strängar vid varje ändring med en handskriven rgba()-formaterare, och tillämpar dem direkt på ett förhandsvisningselement via Reacts style-prop så att webbläsarens egen renderingsmotor ritar resultatet omedelbart.

1
Skiktparametrar matar formateraren
Varje skuggskikt lagrar x/y-förskjutningar, oskärpa, spridning, en hexfärg och ett opacitetsvärde. Vid varje ändring omvandlar en liten shadowToCss-funktion hexfärgen till RGB-komponenter med ett reguljärt uttryck, och bygger sedan rgba()-strängen — till exempel 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Flera skikt sammanfogas med kommatecken.
2
Webbläsaren renderar den levande förhandsvisningen
Den sammansatta strängen tilldelas boxShadow-stilegenskapen på ett div-element direkt i JSX. React uppdaterar DOM-attributet, och webbläsarens CSS-motor målar skuggan omedelbart — ingen canvas eller WebGL är inblandad, bara inbyggd CSS-rendering.
3
Dra-för-att-positionera använder Pointer Events API
Att klicka och dra i förhandsvisningsrutan anropar setPointerCapture på elementet, och spårar sedan onPointerMove-förändringar för att uppdatera det aktiva skiktets x- och y-förskjutning i realtid. Att hålla ned Skift tillämpar en skalfaktor på 0,25x för finjusterad positionering.
4
Utdata kopieras till urklipp
Verktyget skapar två utdataformat från samma skiktdata: en vanlig CSS box-shadow-deklaration, och en godtycklig Tailwind-värdesklass (shadow-[...]) där mellanslag ersätts med understreck enligt Tailwinds syntaxregler. Kopiering med ett klick använder navigator.clipboard.writeText.