CSS Box Shadow Generator
Gratis online CSS box-shadow generator. Skapa vackra skuggor visuellt med justerbar offset, oskärpa, spridning, färg och infällning. Live förhandsgranskning och omedelbar kodkopiering.
Vad är CSS box-shadow?
CSS box-shadow är en CSS-egenskap som lägger till skuggeffekter runt ett elements ram. Det låter dig skapa drop shadows, inre skuggor och flera skug lager genom att ange offset, suddighetsradie, spridningsradie och färgvärden.
Vad är parametrarna för box-shadow?
box-shadow-egenskapen accepterar flera värden: horisontell offset (X), vertikal offset (Y), suddighetsradie, spridningsradie, färg och det valfria nyckelordet inset. Du kan också ange flera skuggor separerade med kommatecken.
Vad är nyckelordet inset?
Nyckelordet inset ändrar skuggan från en yttre skugga (drop shadow) till en inre skugga. När inset anges ritas skuggan inuti elementets kant istället för utanför, vilket skapar en inset-effekt.
Vad är suddighetsradie?
Suddighetsradie bestämmer hur mycket skuggans kant suddas ut. Ett värde på 0 skapar en skarp, fast kant. Större värden skapar en mer diffus, mjukare skugga som sträcker sig längre från elementet.
Vad är spridningsradie?
Spridningsradie expanderar eller krymper skuggans storlek. Positiva värden gör skuggan större än elementet, medan negativa värden gör den mindre. Detta påverkar skuggan innan suddighet appliceras.
Hur skapar jag flera skuggor?
Du kan skapa flera skuggor genom att separera varje skuggdefinition med ett kommatecken. Varje skugga kan ha olika offset-, suddighets-, spridnings- och färgvärden. Skuggor appliceras i den ordning de deklareras, med den första skuggan överst.
Kan jag använda RGBA-färger för skuggor?
Ja, du kan använda valfritt CSS-färgformat inklusive RGBA, HSLA, HEX eller namngivna färger. RGBA och HSLA är särskilt användbara för att skapa halvgenomskinliga skuggor som blandas naturligt med bakgrunder.
Hur kopierar jag den genererade CSS-koden?
Klicka bara på knappen "Kopiera kod" i generatorgränssnittet. CSS-koden kopieras till ditt urklipp och kan klistras direkt in i din stylesheet eller HTML-fil.
Stöds box-shadow i alla webbläsare?
Ja, box-shadow stöds i alla moderna webbläsare inklusive Chrome, Firefox, Safari, Edge och Opera. Det har varit en del av CSS3 sedan 2011 och har utmärkt webbläsarkompatibilitet.
Påverkar box-shadow prestanda?
box-shadow har minimal påverkan på prestandan i moderna webbläsare. Att använda flera komplexa skuggor med stor suddighetsradie på många element kan dock påverka renderingsprestanda, särskilt på mobila enheter.
Vad är vanliga användningsfall för box-shadow?
Vanliga användningar inkluderar att skapa korthöjningseffekter, lägga till djup till knappar, skapa inset-formulärfält, implementera material design-skuggor och lägga till visuell separation mellan överlappande element.
Kan jag animera box-shadow?
Ja, box-shadow kan animeras med CSS-övergångar eller animationer. Att animera box-shadow kan dock vara prestandakrävande. För bättre prestanda, överväg att använda pseudo-element med opacitetsövergångar istället.