CSS Box Shadow Genereren — Schaduwen Visueel Instellen

Box shadows geven diepte aan UI-elementen. De CSS box-shadow eigenschap heeft meerdere parameters die moeilijk in het hoofd te visualiseren zijn. Onze generator laat je visueel instellen.

Box-shadow syntax

box-shadow: hoffset voffset vervaging spreiding kleur inset. Positieve horizontale offset = rechts. Positieve verticale offset = omlaag. Vervaging = overgangsgrootte. Spreiding = uitbreiding. Inset = schaduw naar binnen.

Meerdere schaduwen stapelen

CSS ondersteunt meerdere box shadows met komma's. Hiermee maak je complexe effecten: zachte buitenste gloed gecombineerd met subtiele binnenrand. Gebruik maximaal 2–3 schaduwen — meer ziet er kunstmatig uit.

Realistische schaduwen

Goede schaduwen wijzen consistent in één lichtrichting. Material Design gebruikt schaduwen op basis van elevatieniveaus. Subtiele schaduwen (lage offset, hoge vervaging, lage opaciteit) zien er professioneler uit dan grote donkere schaduwen.