CSS-boksskygge: myke skygger i lag som virker ekte

En CSS-boksskygge skrives box-shadow: 0 4px 12px rgb(0 0 0 / 0.15): vannrett forskyvning, loddrett forskyvning, uskarphetsradius, valgfri utvidelse og farge. Én slik skygge fungerer til en rask prototype, men ser sjelden ekte ut. Skygger som overbeviser øyet, er lagdelte: flere på ett element, hver større og svakere enn den forrige, tonet for flaten under.

Syntaks for 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); }

Hvorfor én skygge virker kunstig

Legg en bok på et bord og se på skyggen. Rett ved kanten der den berører bordet, er skyggen mørk og skarp. Lenger ute blir den bred og svak, fordi lys kommer rundt gjenstanden fra mange retninger. Én box-shadow kan bare være én av delene: tett og hard, eller bred og uskarp. Uansett merker øyet at noe mangler.

Slik legger du boksskygger i lag

Metoden er enkel: start lite og skarpt, og doble forskyvning og uskarphet for hvert ekstra lag. Hold alle lag svake. Opasiteten summeres der lagene overlapper, så enkeltverdiene kan være overraskende lave.

1. 1

   Start med en kontaktskygge

   0 1px 1px med rundt 8 prosent opasitet. Dette er den mørke linjen rett under kanten.

2. 2

   Doble for hvert lag

   Deretter 0 2px 2px, 0 4px 4px, 0 8px 8px. Forskyvning og uskarphet vokser sammen, så lyset virker å komme ovenfra.

3. 3

   Hold hvert lag svakt

   Mellom 5 og 10 prosent hver. Hvis resultatet virker tungt, fjern det største laget før du gjør noe mørkere.

4. 4

   Ton fargen

   Erstatt svart med en dyp versjon av bakgrunnens fargetone, som marineblått på blå sider eller brunt på krem.

: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); }

Lagrer du skygger som variabler, blir de designtokens som holder kort, menyer og dialoger konsekvente. CSS-variabler til temaer og designtokens viser hvordan du kobler dem til et helt tema.

En høydeskala for et grensesnitt

Skygge signaliserer høyde og bør bety det samme overalt. Velg tre eller fire nivåer og gi dem oppgaver. Alt som svever høyere, får en større, mykere skygge, aldri bare en mørkere.

Skygger på fargede og mørke bakgrunner

Helt svarte skygger blir grå og grumsete på en farget flate, slik svart blandet i maling demper den. Hent heller skyggefargen fra bakgrunnen: dyp blågrønn på en mintside, mørk plomme på en syrinfarget. På gradientbakgrunner velger du det mørkeste stoppet og bruker det med lav opasitet.

I mørk modus forsvinner skygger nesten, fordi det er lite lys å blokkere. Vis høyde ved å gjøre hevede flater litt lysere, og behold en svak hårtynn kant. Design for mørk modus går gjennom flatefargene. For paneler over bilder skiller et backdrop-filter ofte lagene bedre enn en tyngre skygge.

Animer box-shadow uten hakking

Å endre box-shadow når pekeren holdes over, tvinger nettleseren til å tegne skyggen på nytt i hver bilderamme av overgangen. På én knapp går det fint. På et rutenett med femti kort hakker det. Standardløsningen er å legge den større skyggen på et pseudoelement og tone opasiteten, som nettleseren kan sette sammen med liten kostnad.

.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 hva som koster tegnetid, står i ytelse for CSS-gradienter. Samme lagdeling passer knapper i gradientknapper i CSS.

Når du bør droppe skyggen

Skygger skiller en flate fra det som ligger bak. Hvis bakgrunnen er en fyldig gradient eller et fotografi, konkurrerer en sterk skygge med den. Ofte gjør en roligere bakgrunn mer for kortet enn noen skygge kan. Marks fra Gradiently er bygget for dette: hver er en levende bakgrunn med egne farger, lys og korn. Ordene over forblir lesbare fordi Marken roer seg bak dem, uten bokser eller skygger som gjør jobben.