CSS Skugg-generator
Generera CSS box-shadow visuellt med live förhandsgranskning. Justera offset, oskärpa, spridning, färg och opacitet. Kopiera CSS-koden. Gratis, 100% i webbläsaren.
Förhandsgranskning
CSS-kod
Referens
Vad är CSS box-shadow?
CSS-egenskapen box-shadow lägger till en eller flera skuggeffekter runt ett elements ram.
box-shadow syntax
box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;
offset-x: Horisontellt avstånd. Positivt = höger, negativt = vänster.
offset-y: Vertikalt avstånd. Positivt = ned, negativt = upp.
Använda flera skugglager
Att kombinera flera skuggor skapar realistiska djupeffekter.
Designtips för skuggor
Använd rgba() eller hsla() färger — halvtransparenta skuggor ser mer naturliga ut.
Håll ljuskällan konsekvent — använd samma offsetriktning genom hela gränssnittet.
Integritet
All skugggenerering körs 100% i din webbläsare. Ingen data skickas till någon server.