CSS-box-shadow-generator

De box-shadow-syntaxis

box-shadow: <x-offset> <y-offset> <blur> <spread> <colour> [inset];

• x-offset: positief = rechts, negatief = links.
• y-offset: positief = omlaag, negatief = omhoog.
• blur: 0 = harde rand, hoger = zachter. De zichtbare omvang reikt ongeveer 1,5× de vervaging buiten het element.
• spread: extra omvang buiten het element. Positief vergroot de schaduw; negatief verkleint hem (handig voor subtiele halo’s).
• colour: ondersteunt elke CSS-kleur. rgba(0, 0, 0, 0.15) is de standaardkeuze.
• inset: trefwoord dat de schaduw naar de binnenkant van het element keert.

Gelaagde schaduwen ogen realistisch

Deze generator levert telkens één schaduwregel op; om een gelaagde schaduw te bouwen, genereer je elke laag afzonderlijk en combineer je de regels met een komma.

Eén schaduw met 0 0 40px ziet er wazig uit. Twee schaduwen, een kleine, scherpe dicht bij het element en een grotere, zachte verder weg, bootsen na hoe echt licht zich verstrooit.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 4px 12px rgba(0, 0, 0, 0.08);

De eerste regel geeft de strakke contactschaduw; de tweede de zachtere omgevingsschaduw. Dit ene patroon dekt 80% van de UI in kaartstijl.

Elevatiesystemen

Material Design gebruikt 6 elevatieniveaus, elk met een andere schaduwstapel. Vereenvoudigd:

Kies er één per elevatierol en gebruik die consequent.

Gekleurde schaduwen ogen natuurlijker

Zuiver zwarte schaduwen ogen kunstmatig, omdat echte schaduwen gekleurd worden door het oppervlak eronder. Probeer eens:

box-shadow: 0 12px 24px rgba(40, 80, 120, 0.18);

Een koel blauwgrijs in plaats van zuiver zwart. Gebruik op warme achtergronden een warmere tint.

Prestaties

Box-shadows worden bij elke herteken-bewerking opnieuw getekend. Grote, zware schaduwen op veel elementen kunnen het scrollen vertragen. Maatregelen:

• Gebruik transform: translateZ(0) op het element om een samengestelde laag af te dwingen.
• Vervang complexe schaduwen pas door filter: drop-shadow() als je wilt dat de schaduw een clip-path volgt (dit is over het algemeen trager).
• Beperk schaduwen op elementen die vaak opnieuw worden gerenderd.

Inset voor ingedrukte toestanden

.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

Inset-schaduwen bootsen een verzonken uiterlijk na; de knop lijkt in het oppervlak te zijn gedrukt. Combineer dit met een kleine, neerwaartse transform: translateY(1px) voor een tastbare klik.