CSS-box-shadowgenerator

Wat het doet

Met de box-shadowgenerator ontwerp je CSS-schaduwen op het oog en kopieer je de kant-en-klare box-shadow-declaratie. Stapel zoveel lagen als je nodig hebt, stel per laag verschuiving, vervaging, spreiding, kleur en dekking in, maak er een binnenschaduw van, en het voorbeeld werkt direct bij. Je kunt ook een bestaande box-shadow-waarde plakken om die visueel te bewerken. Alles draait in je browser.

Zo gebruik je het

1. Begin met een preset of houd de voorbeeldschaduw.
2. Kies een laag met de knoppen Laag, of stapel er een bovenop met + Laag toevoegen.
3. Versleep Horizontale verschuiving, Verticale verschuiving, Vervaging en Spreiding, kies een Kleur en verlaag de Dekking voor een zachter effect. Zet Binnen aan voor een schaduw naar binnen.
4. Stem Kleur van het vak, Achtergrond en Hoekradius van het voorbeeld af op je pagina. Die beïnvloeden alleen het voorbeeld.
5. Kopieer de code uit de kaart CSS.

Het vak Box-shadow-CSS onderaan is bewerkbaar: plak een schaduw uit je stylesheet of ontwerptool en de bediening neemt hem over. Lengtes in rem of em worden omgerekend naar px op basis van 16px.

Voorbeeld

.card {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 12px 24px -6px rgb(30 64 175 / 0.25);
}

Tips voor natuurlijke schaduwen

• Lage dekking. Zwart op 5–25% ziet er realistisch uit; volle donkere schaduwen ogen zwaar.
• Negatieve spreiding voorkomt dat een grote vervaging aan de zijkanten uitloopt — de truc achter de meeste “kaart”-schaduwen.
• Kleur de schaduw. Een schaduw met wat van de achtergrond- of merkkleur oogt rijker dan puur grijs.
• Licht van één kant. Houd de verticale verschuiving in alle lagen positief, zodat alle schaduwen dezelfde lichtrichting tonen.
• Prestaties. Grote vervagingen op veel elementen kunnen scrollen op eenvoudige telefoons vertragen; animeer opacity of transform in plaats van de schaduw zelf.