Box Shadow Generator

Om det här verktyget

Horisontell — positiv flyttar skuggan åt höger, negativ åt vänster. Vertikal — positiv nedåt, negativ uppåt. Oskärpa — högre värden skapar mjukare, mer diffusa skuggor. Spridning — positiv utvidgar skuggan, negativ krymper den.

Aktivera inset för att skapa inre skuggor. Lägg till flera skuggor med "+ Lägg till skugga" — de är kommaseparerade i CSS-utdata, lagrade framifrån och bakåt.

Hur man använder

1. Justera reglagen Horisontell och Vertikal för att ange skuggförskjutning.
2. Öka Oskärpa för en mjuk skugga, eller ange 0 för en hård skugga.
3. Använd Spridning för att utvidga eller krympa skuggan bortom elementet.
4. Klicka på "+ Lägg till skugga" för att lagerlägg flera skuggor för rikare effekter.

Användningsfall

Designers använder box-shadow för djup och höjd i kortkomponenter. Inset-skuggor skapar nedtryckt knappeffekt. Flera staplade skuggor producerar realistisk belysning med omgivningsljus och huvudljus.

Vanliga frågor

• Vad är inset-alternativet? — Inset-skuggor visas inuti elementets kant istället för utanför. De är användbara för att skapa nedtryckt effekt på inmatningsfält och knappar.
• Kan jag lägga till flera skuggor? — Ja. Klicka på "+ Lägg till skugga" för att lägga till ett till skugglager. Alla skuggor kombineras till en kommaseparerad box-shadow-deklaration.
• Vad gör ett negativt spridningsvärde? — En negativ spridning krymper skuggan mindre än elementet. Kombinerat med förskjutning och oskärpa skapar det en subtil skugga som bara sticker fram på en sida.