CSS box shadow: mjuka skuggor i lager som ser verkliga ut

En CSS box shadow skrivs box-shadow: 0 4px 12px rgb(0 0 0 / 0.15): en horisontell förskjutning, en vertikal förskjutning, en suddradie, en valfri spridning och en färg. Den enda skuggan duger för en snabb prototyp, men den ser sällan verklig ut. De skuggor som övertygar ögat ligger i lager: flera skuggor på ett element, var och en större och svagare än den förra, tonade för att passa ytan under.

Syntaxen för box-shadow

/* inset? | offset-x | offset-y | blur | spread | color */
.card { box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15); }

/* Negative spread tucks the shadow under the box */
.card { box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.25); }

/* Inset: a shadow inside the box, like a pressed well */
.well { box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.12); }

/* Spread only: a hairline that follows border-radius */
.chip { box-shadow: 0 0 0 1px rgb(15 23 42 / 0.08); }

/* Several shadows, comma separated, first on top */
.card { box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 8px 16px rgb(0 0 0 / 0.08); }

Varför en enda skugga ser falsk ut

Lägg en bok på ett bord och titta på dess skugga. Precis vid kanten där den vidrör är skuggan mörk och skarp. Längre ut blir den bred och svag, eftersom ljuset sveper runt föremålet från många håll. En enda box-shadow kan bara vara en av de sakerna åt gången: tät och hård, eller bred och suddig. Hur som helst märker ögat att något saknas.

Så lägger du box shadows i lager

Metoden är enkel: börja litet och skarpt, dubblera sedan förskjutning och sudd för varje extra lager och håll varje lager svagt. Opaciteterna läggs ihop där lagren överlappar, så enskilda värden kan vara förvånansvärt låga.

1. 1

   Börja med en kontaktskugga

   0 1px 1px med ungefär 8 procents opacitet. Det är den mörka linjen strax under kanten.

2. 2

   Dubblera för varje lager

   Sedan 0 2px 2px, 0 4px 4px, 0 8px 8px. Förskjutning och sudd växer tillsammans, så att ljuset verkar komma ovanifrån.

3. 3

   Håll varje lager svagt

   Mellan 5 och 10 procent vardera. Om resultatet ser tungt ut, ta bort det största lagret innan du gör något mörkare.

4. 4

   Tona färgen

   Byt ut svart mot en djup version av bakgrundens nyans, som ett marinblått på blå sidor eller ett brunt på kräm.

:root {
  /* Shadow colour as channels, so opacity can vary per layer */
  --shadow-color: 222 47% 11%;

  --shadow-sm:
    0 1px 1px hsl(var(--shadow-color) / 0.08),
    0 2px 2px hsl(var(--shadow-color) / 0.06);

  --shadow-md:
    0 1px 1px hsl(var(--shadow-color) / 0.08),
    0 2px 2px hsl(var(--shadow-color) / 0.07),
    0 4px 4px hsl(var(--shadow-color) / 0.06),
    0 8px 8px hsl(var(--shadow-color) / 0.05);

  --shadow-lg:
    0 1px 1px hsl(var(--shadow-color) / 0.07),
    0 2px 2px hsl(var(--shadow-color) / 0.07),
    0 4px 4px hsl(var(--shadow-color) / 0.06),
    0 8px 8px hsl(var(--shadow-color) / 0.06),
    0 16px 16px hsl(var(--shadow-color) / 0.05),
    0 32px 32px hsl(var(--shadow-color) / 0.04);
}

.card { box-shadow: var(--shadow-md); }
.dialog { box-shadow: var(--shadow-lg); }

Att lagra skuggor som variabler gör dem till designtokens, vilket håller varje kort, meny och dialogruta enhetlig. CSS-variabler för teman och designtokens visar hur du kopplar in dem i ett helt tema.

En höjdskala för ett gränssnitt

Skugga är en signal om höjd, så den bör betyda samma sak överallt. Välj tre eller fyra nivåer och ge dem uppgifter. Allt som svävar högre får en större, mjukare skugga, aldrig bara en mörkare.

Skuggor på färgade och mörka bakgrunder

Rent svarta skuggor blir grå och leriga på en färgad yta, på samma sätt som svart blandat i färg gör den matt. Ta i stället skuggfärgen från bakgrunden: en djup turkos skugga på en mintfärgad sida, en mörk plommon på en lila. På gradientbakgrunder, välj gradientens mörkaste stopp och använd det med låg opacitet.

I mörkt läge försvinner skuggor nästan, eftersom det finns lite ljus för dem att blockera. Visa höjd genom att göra upphöjda ytor något ljusare i stället, och behåll en svag hårfin linje vid kanten. Design för mörkt läge går igenom ytfärgerna. För paneler som svävar över bilder skiljer ett backdrop filter ofta lagren bättre än en tyngre skugga.

Animera box-shadow utan hackande

Att ändra box-shadow vid hovring tvingar webbläsaren att rita om skuggan i varje bildruta av övergången. På en knapp går det bra. På ett rutnät med femtio kort hackar det. Standardlösningen är att lägga den större skuggan på ett pseudoelement och tona dess opacitet, vilket webbläsaren kan sammanfoga billigt.

.card {
  position: relative;
  box-shadow: var(--shadow-sm);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
}

.card:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .card::after { transition: none; }
}

Mer om vad som kostar ritningstid finns i CSS-gradienters prestanda, och samma lagermetod passar knappar i gradientknappar i CSS.

När du ska hoppa över skuggan

Skuggor skiljer en yta från det som ligger bakom. Om bakgrunden är en rik gradient eller ett fotografi strider en stark skugga mot den. Ofta gör en tystare bakgrund mer för kortet än någon skugga kan. Gradiently-Marks är byggda för det: var och en är en levande bakgrund med egna färger, ljus och korn, och orden du lägger över den förblir läsbara eftersom Marken lugnar sig själv bakom dem, utan rutor eller skuggor som gör jobbet.