6XC

CSS Box Shadow Generator

Ontwerp een box-shadow visueel — verschuiving, vervaging, spreiding, kleur, dekking en inset — met live preview.

808 weergaven

De box-shadow-eigenschap

Syntaxis: box-shadow: x y vervaging spreiding kleur. De verschuivingen bewegen de schaduw, vervaging verzacht de rand ervan, spreiding vergroot of verkleint hem, en de kleur draagt meestal alfa (bijv. rgba(0,0,0,0.15)) voor realisme. Voeg inset toe om de schaduw binnen de box te tekenen. Zachte schaduwen met lage dekking en een kleine y-verschuiving ogen het meest natuurlijk.

Veelgestelde vragen

Wat is het verschil tussen vervaging en spreiding?

Vervaging verzacht de rand van de schaduw zonder de grootte te veranderen; spreiding vergroot (of verkleint bij negatieve waarden) de schaduw in alle richtingen voordat vervaging wordt toegepast.

Hoe maak ik een elegante, moderne schaduw?

Houd x op 0, y klein (2-8px), vervaging ruim (10-30px) en dekking laag (0,08-0,2). Twee schaduwen laten overlappen — een strakke en een brede — voegt diepte toe.

Vergelijkbare tools

CSS Kleurverloop Generator Ontwerp lineaire, radiale en conische CSS-kleurverlopen met live voorbeeld en kopieer de code. Genereren CSS Border-Radius Generator Rond elke hoek afzonderlijk of allemaal tegelijk af, in px of %, met live voorbeeld en kopieerbare CSS. Genereren CSS Tekstschaduw Generator Ontwerp een text-shadow met verschuiving, vervaging, kleur en dekking — live voorbeeld op voorbeeldtekst. Genereren CSS Rand Generator Ontwerp een rand visueel — breedte, stijl (solid, dashed, dotted, double…), kleur en radius — met live preview. Genereren