DevTulz Online

CSS Box Shadow Generator

Bakgrund

Vad är CSS Box Shadow?

CSS-egenskapen box-shadow lägger till skuggeffekter runt ett elements ram. Skuggor kan förskjutas, göras oskarpa, spridas, färgsättas och ställas in som inset (inre skugga). Flera kommaseparerade skuggor kan läggas ovanpå varandra för rika effekter. Den här generatorn låter dig visuellt bygga komplexa flerlagers-skuggor och kopiera den klistra-klara CSS:en till urklipp.

Hur man använder Box Shadow Generatorn

  1. Justera reglagen för Offset X/Y, Blur och Spread för att placera och forma skuggan.

  2. Klicka på färgprovet för att välja en skuggfärg och använd Opacity-reglaget för genomskinlighet.

  3. Växla 'Inset' för att skapa ett inre glöd eller ett intryckt effekt.

  4. Klicka på '+ Lägg till lager' för att stapla flera skuggor ovanpå varandra.

  5. Kopiera den genererade CSS:en och klistra in den i ditt stylesheet.

Vanliga frågor

Vad är skillnaden mellan box-shadow och drop-shadow-filtret? box-shadow lägger till skuggor runt elementets rektangulära gränsbox och stöder inskuggor. CSS-filtret: drop-shadow() appliceras på elementets visuella form (inklusive transparens), vilket gör att den kan följa icke-rektangulära konturer som PNG-bilder med genomskinlig bakgrund.

Hur skapar jag en Material Design-kortlyftseffekt? Stapla två box-shadows: en mjuk omgivningsskugga (stor oskärpa, låg opacitet, svag spridning) och en nyckelskugga (mindre oskärpa, högre opacitet, riktad förskjutning). Till exempel: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

Påverkar box-shadow sidlayouten? Nej. box-shadow påverkar inte elementets storlek eller position i dokumentflödet. Till skillnad från outline tar den inte upp layoututrymme och kommer inte att trycka andra element omkring.

Kan jag animera box-shadow? Ja. box-shadow är animerbar med CSS-övergångar och animeringar. För prestanda, föredra endast box-shadow-övergång när det är nödvändigt — webbläsare kan inte GPU-accelerera box-shadow-ändringar lika effektivt som transform eller opacity.

Keywords: CSS box shadow generator, box-shadow CSS, CSS skuggverktyg, CSS drop shadow, inre skugga, flerlagers skugga, CSS shadow online