Box shadow-generator
Lägg några mjuka lager på varandra för skuggor som ser naturliga ut och kopiera sedan CSS-koden.
Förseglat på den här enheten
Körs i din webbläsare. Inget laddas upp.
Förseglat
Förhandsvisning
Skugglager
Ingen skugga än. Lägg till ett lager för att börja.
CSS-kod
Så fungerar det
-
Börja med ett förval
Välj en mjuk, lagrad, svävande, skarp eller inre skugga som utgångspunkt.
-
Justera lagren
Finjustera förskjutning, oskärpa, spridning, färg och opacitet för varje lager, och lägg till eller ta bort lager. Förhandsvisningen uppdateras medan du arbetar.
-
Kopiera CSS-koden
Kopiera box-shadow-deklarationen och klistra in den i din stilmall.
Vanliga frågor
Vad gör oskärpa och spridning?
Oskärpa mjukar upp skuggans kant: ju högre värde, desto diffusare blir den. Spridning gör skuggan större eller mindre innan oskärpan läggs på. En negativ spridning med stor oskärpa ger den mjuka, lyfta känsla som är vanlig i moderna gränssnitt.
Varför använda flera skugglager?
Verkliga skuggor har en mörk, tät kärna nära föremålet och en mjuk, bred gloria längre bort. Om du lägger ett litet skarpt lager under ett eller två större och ljusare lager efterliknar du det, och det ser mycket naturligare ut än en enda skugga.
Vad är en inre skugga (inset)?
En inre skugga ritas inuti elementet i stället för utanför. Den får en yta att se intryckt ut, vilket passar bra för inmatningsfält eller nedtryckta knappar.
Fungerar skuggan i alla webbläsare?
Ja. box-shadow, flera lager och färgsyntaxen rgb() som används i koden stöds av alla aktuella webbläsare.
Gör en box shadow min sida långsammare?
Statiska skuggor är billiga att rita. Mycket stor oskärpa på många element, eller att animera själva skuggan, kan kosta mer. Vill du animera en skugga mjukt kan du i stället tona opaciteten på ett pseudoelement som bär skuggan.