CSS-schaduwgenerator (box-shadow)

Verschuif de schuifregelaars en zie meteen hoe de schaduw van een blok, kaart of knop eruitziet. Combineer meerdere lagen voor realistischere schaduwen of begin met een van de voorbeelden, en kopieer de box-shadow-code voor je CSS.

Zo werkt box-shadow

De eigenschap box-shadow krijgt tot vier maten en een kleur: horizontale en verticale verschuiving (negatief naar links en naar boven), vervaging (0 = scherpe rand), spreiding (maakt de schaduw groter of, negatief, kleiner) en de kleur, meestal zwart met transparantie (rgba(0, 0, 0, 0.2)). Met het sleutelwoord inset wordt de schaduw binnen het blok getekend.

Je kunt meerdere schaduwen combineren, gescheiden door komma's. De meest realistische schaduwen combineren een korte, scherpe schaduw met een grotere, zachte, zoals Material Design en de meeste designsystemen doen.

Trucs met box-shadow

Een schaduw zonder verschuiving en vervaging maar met spreiding (0 0 0 4px) tekent een omtrek die geen ruimte inneemt, ideaal voor de focus van knoppen en velden. Neumorfisme gebruikt twee tegengestelde schaduwen, een lichte en een donkere, op een achtergrond in dezelfde kleur als het blok.

Schaduwen hebben geen invloed op de lay-out of de grootte van het element, maar heel grote, zachte schaduwen op veel elementen kunnen het scrollen op mobiel vertragen. Om de contour van een transparante PNG te schaduwen gebruik je filter: drop-shadow(), en voor tekst text-shadow.