Box Shadow-generator
Box shadow-generatorn bygger en CSS box-shadow med reglage för X- och Y-förskjutning, oskärpa, spridning, färg, opacitet och inset, plus förval från Material Design och Tailwind, och ger dig exakt CSS.
Om verktyget
Box shadow-generatorn bygger en CSS box-shadow med reglage för X- och Y-förskjutning, oskärpa, spridning, färg, opacitet och inset, plus förval från Material Design och Tailwind, och ger dig exakt CSS.
Så använder du det
- Börja från ett förval eller behåll Custom.
- Justera X/Y-förskjutning, oskärpa, spridning och opacitet.
- Välj skuggans färg och kryssa i Inset för en inre skugga.
- Klicka på Copy CSS för att klistra in box-shadow-regeln.
Bra att veta
- Syntaxen för box-shadow är: [inset] offset-x offset-y blur-radius spread-radius color.
- En större blur-radie gör kanten mjukare; spread gör att skuggan växer eller krymper innan oskärpan läggs på.
- Mörka skuggor med låg opacitet (ungefär 10–25%) ser naturligare ut än helt svarta.
- Flera skuggor kan läggas i lager genom att separera dem med kommatecken.
- Nyckelordet inset ritar skuggan innanför elementets kant.
Körs helt i din webbläsare – inget du skriver in laddas upp eller sparas.
Vanliga frågor
Hur lägger jag till en skugga på en div i CSS?
Använd egenskapen box-shadow, till exempel box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2); verktyget skriver värdet åt dig.
Vad är skillnaden mellan blur och spread?
Blur styr hur mjuk skuggans kant är. Spread förstorar eller förminskar skuggan innan oskärpan läggs på.
Hur gör jag en inre skugga?
Lägg till nyckelordet inset i början av värdet, eller kryssa i Inset i verktyget.
Kan jag använda flera box-shadows?
Ja. Separera skuggorna med kommatecken; skuggor i lager, som förvalen från Material och Tailwind, ser mer realistiska ut.