Welke CSS heb ik nodig voor een zachte, moderne box-shadow?.

Een zachte moderne schaduw moet afscheiding suggereren, niet opvallen. Gebruik een bescheiden verticale verschuiving, ruime vervaging, weinig spreiding en een donkere kleur met lage dekking.

box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

De eerste twee waarden bepalen de verschuiving. Vervaging maakt de rand zacht. Spreiding maakt de schaduw groter of kleiner vóór het vervagen; bij kaarten houd je die meestal rond nul.

Vermijd veelgemaakte fouten

Een harde zwarte schaduw kan een schone interface gedateerd maken. Te veel vervaging laat kaarten te ver boven de pagina zweven. Een modal verdient meer verheffing dan een gewone kaart.

Gebruik de Schaduwgenerator om waarden visueel aan te passen en CSS te kopiëren. Controleer het resultaat op de echte achtergrond en op mobiel.