⭐ 0
🔍
Text Bild PDF och dokument Ljud Musik Elektronik Tid Verktyg Validatorer Esoterik Spel

CSS Box Shadow-generator

Bygg CSS box-shadow-kod visuellt: reglage för förskjutning, oskärpa, spridning, färg med opacitet, inset-läge och upp till fyra lager med live-förhandsvisning.

🔒 Bearbetas helt i din webbläsare – ingenting du anger här laddas någonsin upp.

0px
4px
12px
0px
0.25
Bearbetar... 0%

Resultat

En box-shadow-deklaration har sex rörliga delar – X- och Y-förskjutning, oskärpa, spridning, färg och det valfria nyckelordet inset – och det enda sättet att få dem rätt är att se dem. Den här generatorn lägger varje del på ett reglage och renderar resultatet på ett förhandsvisningskort medan du drar, så CSS-raden längst ner är alltid exakt vad du ser.

Verkliga skuggor är sällan ett enda lager. Lagerlistan låter dig stapla upp till fyra skuggor i en deklaration: en skarp mörk linje för kantdefinition plus en bred mjuk uttvättning för höjd, eller det ljus-mörka par som definierar neumorfism. Välj ett lager för att redigera det, ta bort de du inte behöver, så uppdateras det kombinerade box-shadow-värdet live.

Skuggor läses väldigt olika på mörka gränssnitt, där en svart skugga på en nästan svart sida helt enkelt försvinner. Bakgrundsväxlingen för förhandsvisningen växlar bakgrunden mellan ljus och mörk så att du kan kontrollera båda teman innan du publicerar. Förinställda sidor täcker de varianter folk faktiskt söker efter: en mjuk höjdskugga, en inset-fördjupning, receptet för neumorfism med två lager och en subtil kortskugga.

Precis som alla verktyg på den här sajten är generatorn gratis och körs helt i din webbläsare: ingen uppladdning, inget konto, och den fortsätter att fungera offline när sidan väl har laddats.

Gillar du det här verktyget? Tror du att den här produkten är användbar? Ser du potential i det och vill stödja det?

🛡️
Körs i webbläsare

Dina filer och indata lämnar aldrig den här enheten. Bearbetningen körs helt offline. 100 % säker.

Godkända format och regler

  • Reglage för X/Y-förskjutning, oskärpa och spridning med pixelvärden i realtid, plus en färgväljare med separat opacitetsreglage.
  • Kryssruta för inset och en lagerlista: lägg till, välj och ta bort upp till fyra skugglager.
  • Kopieringsbar box-shadow CSS-rad som täcker alla lager, förhandsvisad mot en ljus eller mörk bakgrund som du kan växla mellan.

Viktiga fördelar

✓ Varje reglage uppdaterar förhandsvisningskortet och CSS-raden direkt – du slipper gissa hur 0 8px 24px rgba(...) faktiskt ser ut.
✓ Upp till fyra skugglager gör att du kan bygga realistiska höjdeffekter och neumorfiska uttryck som generatorer med enkel skugga inte klarar.
✓ Med växlingen mellan ljus och mörk bakgrund ser du hur skuggan fungerar i båda teman innan du publicerar.

Användningsfall

  • • Ställ in en mjuk höjdskugga för ett produktkort genom att dra i reglagen istället för att redigera rgba()-värden i blindo.
  • • Bygg neumorfism-effekten med två lager för ljus och mörker, och kopiera hela den flerskiktade box-shadow-raden med ett klick.
  • • Kontrollera mot den mörka förhandsvisningsbakgrunden att din skugga fortfarande fungerar i mörkt läge innan du publicerar temat.