CSS Box Shadow Generator

Vad är CSS box-shadow?

CSS box-shadow-egenskapen lägger till skuggeffekter runt ett element. Skuggor skapar visuellt djup och lyfter element från bakgrunden, i enlighet med Material Designs principer om elevation. Syntaxen är: box-shadow: offset-x offset-y blur-radius spread-radius color. Flera skuggor kan kombineras med kommatecken för komplexa effekter.

Skuggor är en grundläggande del av modern webbdesign. Subtila skuggor på kort, knappar och modaler gör gränssnittet mer intuitivt genom att antyda klickbarhet och skiktning. Överdrivna skuggor (stora, mörka, skarpa) ser daterade ut — moderna designer föredrar mjuka, stora, halvgenomskinliga skuggor. Skuggor påverkar inte layouten — de renderas utanför elementets boxmodell.

Box-shadow syntaxuppdelning

Den fullstandiga syntaxen ar: box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color. Vardena offset-x och offset-y ar obligatoriska och definierar skuggans position relativt elementet. Positiva varden flyttar skuggan at hoger och nerat. Blur-radius mjukar upp kanterna -- ett varde pa 0 skapar en skarp skugga. Spread-radius expanderar eller krymper skuggan -- negativa varden skapar en tightare skugga.

Hur du använder denna generator

Justera skuggparametrarna visuellt med reglagen: X- och Y-offset (skuggposition), oskärpa (mjukhet), spridning (storlek) och färg (inklusive genomskinlighet). Se förhandsgranskningen i realtid. Lägg till flera skugglager för sofistikerade effekter. Kopiera den genererade CSS-koden med ett klick. Verktyget stöder både box-shadow och text-shadow.

Tips for effektiva skuggor

• Anvand subtila skuggor med lag opacitet for ett rent, modernt, upphojt utseende.
• Lagra flera skuggor for mer realistiskt djup -- en skarp nara skugga plus en mjuk diffus skugga efterliknar verkligt ljus.
• Storre oskarphet med liten offset skapar en mjuk svavande effekt som ar ideal for kort och modaler.
• Negativ spread skapar en tightare, mer fokuserad skugga som ar anvandbar for subtila ramar.
• Matcha skuggriktningen konsekvent over hela sidan -- inkonsistenta ljuskallor ser onaturliga ut.

Material Designs hoJdsystem

Googles Material Design definierar hojdnivaer fran 0dp till 24dp, var och en med specifika skuggvarden. Hogre hojd innebar storre blur- och offset-varden. Detta system sakerslaller konsekvent visuell hierarki over en applikation. Aven om du inte foljer Material Design ar principen om att anvanda konsekvent hojdnivaer vardefull for alla designsystem.

Prestandapaverkan

Box-shadows ar GPU-accelererade i moderna webblasare och har minimal prestandapaverkan for typisk anvandning. Dock kan mycket stora blur-radier (50px+) pa manga element samtidigt orsaka bildstorningar under animationer. Om du behover animera skuggor, overvag att anvanda transform: scale() for att vaTa ett pseudoelement med en statisk skugga istallet for att animera skuggvardena direkt.

Vanliga frågor

Påverkar box-shadow prestandan?

Skuggor kräver GPU-rendering men är i allmänhet snabba i moderna webbläsare. Prestandaproblem uppstår med: mycket stora blur-radius-värden, många skuggor som animeras samtidigt, eller skuggor på hundratals element som renderas om under scrollning. Animera inte box-shadow direkt — det utlöser ommålning. Använd istället transform: scale() med en pseudoelement-skugga, eller animera opacity.

Vad är skillnaden mellan box-shadow och drop-shadow?

box-shadow appliceras på elementets rektangulära box oavsett form. filter: drop-shadow() följer elementets faktiska kontur inklusive transparens — perfekt för PNG-bilder och SVG-ikoner med genomskinliga bakgrunder. Drop-shadow stöder inte spread-radius eller nyckelordet inset. Använd box-shadow för kort och behållare, drop-shadow för ikoner och bilder.