CSS box-shadow-generator
Bygg en box-shadow genom att flytta reglage och se resultatet på ett kort. Stapla upp till sex lager för mjukare, mer realistiska skuggor, använd inset för intryckta effekter och börja från förval som mjuk, svävande, glöd eller neumorfism. Kopiera CSS-koden med ett klick.
Så använder du den
- Välj ett förval eller justera skuggans förskjutning, oskärpa, spridning, färg och opacitet.
- Lägg till lager med + och markera varje lager för att redigera det; ändra bakgrund, rutans färg och hörnradie så att det passar din design.
- Kopiera CSS-koden och klistra in den i elementets regel.
Vanliga frågor
Vad gör oskärpa och spridning?
Oskärpa gör skuggans kant mjukare; vid noll blir kanten skarp. Spridning gör skuggan större i alla riktningar före oskärpan, och negativ spridning gör den mindre, vilket hjälper en stor, suddig skugga att stanna under elementet.
Varför använda flera skuggskikt?
Verkliga skuggor är mörkare nära föremålet och bleknar längre bort. Att kombinera en liten, skarp skugga med en större, mjukare härmar det och ser mer naturligt ut än en enda skugga. Det första lagret i listan ritas överst.
Gör box-shadow en sida långsammare?
Inte vid normal användning. Mycket stor oskärpa på många element, eller att animera själva skuggan, kan kosta prestanda på långsamma mobiler; för att animera, ändra i stället opaciteten på ett pseudoelement som har skuggan.
🏷️ Metataggeneratorn
🖼️ Open Graph-generator
🔗 UTM-länkgenerator
🌈 CSS-gradientgenerator