Softonic

CSS box-shadow-generator

Steg 1 / 2
Nästa

Skapa en box-shadow-regel i taget: ställ in horisontell och vertikal offset, oskärpa, spridning, färg och valfri inset, och kopiera sedan resultatet. Riktiga skuggor behöver oftast två eller tre lager, så skapa varje lager separat och sammanfoga reglerna med kommatecken.

Så designar du en box-shadow

  1. 1

    Ställ in skuggans värden

    Horisontell offset, vertikal offset, oskärperadie, spridning och färg med opacitet.

  2. 2

    Växla inset

    Vänd skuggan till inset för en inre skugga, användbart för intryckta knappar och fördjupningseffekter.

  3. 3

    Välj färg

    Svart med låg opacitet är klassikern. Färgade skuggor (i samma nyans som elementet, fast mörkare) ser mer naturliga ut.

  4. 4

    Kopiera CSS

    Kopiera den enskilda skuggeregeln och klistra in den i din stilmall. För skuggor i lager skapar du varje lager separat och kombinerar reglerna med kommatecken.

box-shadow-syntaxen

box-shadow: <x-offset> <y-offset> <blur> <spread> <colour> [inset];
  • x-offset: positiv = höger, negativ = vänster.
  • y-offset: positiv = nedåt, negativ = uppåt.
  • blur: 0 = hård kant, högre = mjukare. Den synliga storleken sträcker sig ungefär 1,5× oskärpan utanför elementet.
  • spread: extra storlek utanför elementet. Positivt värde förstorar skuggan; negativt krymper den (bra för subtila glorior).
  • colour: stöder valfri CSS-färg. rgba(0, 0, 0, 0.15) är standardvalet.
  • inset: nyckelord som vänder skuggan in i elementet.

Skuggor i lager ser verkliga ut

Den här generatorn ger en skuggeregel i taget; för att bygga en skugga i lager skapar du varje lager separat och kombinerar reglerna med kommatecken.

En enda skugga med 0 0 40px ser disig ut. Två skuggor – en liten, skarp nära elementet och en större, mjuk längre bort – härmar hur verkligt ljus sprids.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 4px 12px rgba(0, 0, 0, 0.08);

Den första raden ger den tajta kontaktskuggan; den andra den mjukare omgivningsskuggan. Det här enda mönstret täcker 80 % av kortbaserade gränssnitt.

Elevationssystem

Material Design använder sex elevationsnivåer, var och en med en egen uppsättning skuggor. Förenklat:

Elevation Skugga
1 (vilande) 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24)
2 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23)
3 0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.23)
4 (upplyft) 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22)
5 (svävande) 0 19px 38px rgba(0,0,0,.30), 0 15px 12px rgba(0,0,0,.22)

Välj en per elevationsroll och använd den konsekvent.

Färgade skuggor ser mer naturliga ut

Helt svarta skuggor ser konstgjorda ut, eftersom riktiga skuggor färgas av ytan under dem. Prova:

box-shadow: 0 12px 24px rgba(40, 80, 120, 0.18);

En sval blågrå nyans i stället för rent svart. På varma bakgrunder bör du använda en varmare ton.

Prestanda

Box-shadows ritas om vid varje omritning. Stora, tunga skuggor på många element kan göra rullningen trög. Åtgärder:

  • Använd transform: translateZ(0) på elementet för att tvinga fram ett sammansatt lager.
  • Ersätt komplexa skuggor med filter: drop-shadow() endast om du behöver att skuggan följer en clip-path (det är generellt långsammare).
  • Begränsa skuggor på element som ritas om ofta.

Inset för intryckta tillstånd

.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

Inset-skuggor härmar ett nedsänkt utseende – knappen ser ut att tryckas in i ytan. Kombinera med en liten nedåtriktad transform: translateY(1px) för en kännbar klick.

Vanliga frågor

Vanligtvis för att oskärpan är för låg eller spridningen för hög. En skugga med hård kant och ingen oskärpa ser ut som ett dubblerat element. Öka oskärpan (20–30px är en vanlig utgångspunkt) och håll spridningen på 0 eller mycket små negativa värden.

Box-shadow följer elementets border-box, inklusive border-radius – så rundade kort får automatiskt snyggt rundade skuggor. För clip-path-former följer box-shadow inte klippningen; använd filter: drop-shadow() i stället.

Förskjut skuggan kraftigt i vald riktning och använd negativ spridning för att dölja motsatt sida. Eller använd två skuggor – en synlig på målsidan och en annan med negativ spridning för att “äta upp” det oönskade överskottet.

Det finns ingen hård gräns, men varje skugga är ytterligare ett ritpass. Tre till fyra lager är det praktiska taket; behöver du fler bör du i stället överväga en bakgrundsbild eller SVG.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

Färgpalettgenerator

Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.

Slumpgenerator för bokstäver

Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.

HTML-formaterare

Formatera HTML lokalt i webbläsaren med indrag på två eller fyra blanksteg. HTML laddas inte upp eller valideras.

Verktyget finns på andra språk