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.
Hur man använder CSS Box Shadow Generator
Forma CSS box-skuggor visuellt i stället för att gissa värden. Generatorn körs lokalt i din webbläsare och inget av det du matar in laddas upp.
- Ställ in H-Offset och V-Offset för att flytta skuggan i sidled och i höjd.
- Höj Blur för mjukare kanter och använd Spread för att göra skuggan större eller mindre.
- Välj en Color och justera dess Opacity för ett mjukare, naturligare intryck.
- Kryssa i Inset för att rita skuggan inuti elementet i stället för runt omkring.
- Kopiera den färdiga box-shadow-regeln från förhandsvisningen till din stilmall.
Liten blur med ett svagt positivt V-Offset ger en diskret, realistisk kontaktskugga precis under elementet.
Relaterade verktyg
- CSS Border Radius Generator Visuell CSS border-radius generator. Justera varje hörn oberoende med realtidsförhandsgranskning och kopiera CSS-koden omedelbart.
- CSS-gradientgenerator Skapa fantastiska CSS-gradienter visuellt. Generera linjära, radiella och koniska gradienter med flera färgstopp, vinklar och positioner. Kopiera produktionsklar CSS-kod omedelbart.
- CSS Grid-generator Gratis visuell CSS Grid-generator med liveförhandsgranskning. Designa responsiva grid-layouter interaktivt och exportera produktionsklar CSS-kod direkt.
- CSS Flexbox-generator Visuell CSS Flexbox-generator med liveförhandsgranskning. Justera flex-egenskaper och få CSS-kod redo att använda.
- Border-radius Generator Gratis kreativ border-radius-generator online. Dra i 8 handtag eller välj en blob-förinställning för att skapa organiska CSS-former och kopiera koden direkt.
- Färgkonverterare Gratis online färgkonverterare. Konvertera HEX, RGB, HSL, HSV format omedelbart med visuell väljare. 100% privat, körs i din webbläsare.
- CSS Easing-generator Gratis online CSS easing-generator. Dra cubic-bezier-kontrollpunkterna på en interaktiv kurva, välj bland 18 förinställningar, titta på en loopande bollanimation och kopiera tidsfunktionen direkt.
- CSS Textskugggenerator Gratis online textskugggenerator. Stapla flera skugglager med offset, oskärpa, färg och opacitet, prova förinställningar som Neon, 3D, Retro och kopiera CSS-koden direkt.