CSS box-shadow: zachte, gelaagde schaduwen die echt ogen

Een CSS box-shadow schrijf je als box-shadow: 0 4px 12px rgb(0 0 0 / 0.15): een horizontale verschuiving, een verticale verschuiving, een blurstraal, een optionele spreiding en een kleur. Die ene schaduw is prima voor een snel prototype, maar ziet er zelden echt uit. De schaduwen die het oog overtuigen zijn gelaagd: meerdere schaduwen op één element, elk groter en vager dan de vorige, getint naar het oppervlak eronder.

box-shadow-syntaxis

/* 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); }

Waarom één schaduw nep lijkt

Leg een boek op een tafel en kijk naar de schaduw. Precies waar het de tafel raakt is de schaduw donker en scherp. Verder weg wordt hij breed en vaag, omdat licht uit veel richtingen om het object heen valt. Eén box-shadow kan maar één van die dingen tegelijk zijn: strak en hard, of breed en wazig. Hoe dan ook merkt het oog dat er iets ontbreekt.

Zo laag je box-shadows

De methode is eenvoudig: begin klein en scherp en verdubbel de verschuiving en blur voor elke extra laag, met elke laag vaag. De dekking telt op waar lagen overlappen, dus de afzonderlijke waarden kunnen verrassend laag zijn.

1. 1

   Begin met een contactschaduw

   0 1px 1px met een dekking van ongeveer 8 procent. Dit is de donkere lijn vlak onder de rand.

2. 2

   Verdubbel voor elke laag

   Dan 0 2px 2px, 0 4px 4px, 0 8px 8px. Verschuiving en blur groeien samen, zodat het licht van boven lijkt te komen.

3. 3

   Houd elke laag vaag

   Tussen 5 en 10 procent per laag. Als het resultaat zwaar oogt, haal dan de grootste laag weg voordat je iets donkerder maakt.

4. 4

   Tint de kleur

   Vervang zwart door een diepe versie van de tint van de achtergrond, zoals marineblauw op blauwe pagina’s of bruin op crème.

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

Schaduwen opslaan als variabelen maakt er design tokens van, wat elke kaart, elk menu en elk dialoogvenster consistent houdt. CSS-variabelen voor theming en design tokens laten zien hoe je ze in een volledig thema verwerkt.

Een elevatieschaal voor een interface

Schaduw is een signaal van hoogte, dus hij moet overal hetzelfde betekenen. Kies drie of vier niveaus en wijs ze toe aan taken. Alles wat hoger zweeft krijgt een grotere, zachtere schaduw, nooit alleen een donkerdere.

Schaduwen op gekleurde en donkere achtergronden

Puur zwarte schaduwen worden grijs en modderig op een gekleurd oppervlak, zoals zwart in verf die dof maakt. Neem de schaduwkleur in plaats daarvan van de achtergrond: een diep groenblauwe schaduw op een muntgroene pagina, een donkere pruim op een lila pagina. Kies bij verloopachtergronden de donkerste stop van het verloop en gebruik die met lage dekking.

In de donkere modus verdwijnen schaduwen bijna, omdat er weinig licht is om te blokkeren. Toon hoogte door verhoogde vlakken iets lichter te maken en houd een vage haarlijn aan de rand. Ontwerp voor de donkere modus loopt de oppervlaktekleuren door. Voor panelen die over beeld zweven scheidt een backdrop-filter lagen vaak beter dan een zwaardere schaduw.

box-shadow animeren zonder haperingen

box-shadow bij hover veranderen dwingt de browser de schaduw bij elk frame van de overgang opnieuw te tekenen. Bij één knop is dat prima. Bij een raster van vijftig kaarten hapert het. De standaardoplossing is de grotere schaduw op een pseudo-element te zetten en de dekking te laten infaden, wat de browser goedkoop kan samenstellen.

.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; }
}

Meer over wat tekentijd kost staat in CSS-verloopprestaties, en dezelfde gelaagde aanpak past bij knoppen in verloopknoppen in CSS.

Wanneer je de schaduw weglaat

Schaduwen scheiden een oppervlak van wat erachter ligt. Als de achtergrond een rijk verloop of een foto is, vecht een sterke schaduw ertegen. Vaak doet een rustigere achtergrond meer voor de kaart dan welke schaduw ook. De Marks van Gradiently zijn daarvoor gemaakt: elk is een levende achtergrond met eigen kleuren, licht en korrel, en de woorden die je erop zet blijven leesbaar omdat de Mark zichzelf erachter kalmeert, zonder dat vakken of schaduwen het werk doen.