CSS Schaduw Generator
Genereer CSS box-shadow visueel met live preview. Pas offset, blur, spreiding, kleur en dekking aan. Kopieer de CSS-code. Gratis, 100% in je browser.
Voorbeeld
CSS-code
Referentie
Wat is CSS box-shadow?
De CSS-eigenschap box-shadow voegt een of meer schaduweffecten toe rond het kader van een element. Het wordt gedefinieerd door offsets ten opzichte van het element, blur- en spreidingsradii, kleur en een optioneel inset-sleutelwoord.
box-shadow syntaxis
box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;
offset-x: Horizontale afstand. Positief = rechts, negatief = links.
offset-y: Verticale afstand. Positief = onder, negatief = boven.
blur-radius (optioneel, standaard 0): Grotere waarden produceren een zachtere schaduw.
spread-radius (optioneel, standaard 0): Positieve waarden vergroten de schaduw, negatieve verkleinen.
Meerdere schaduwlagen gebruiken
Het combineren van meerdere schaduwen creëert realistische diepte-effecten. Een gangbare techniek is het combineren van een strakke, donkere schaduw dicht bij het element met een grote, vage schaduw verder weg.
Ontwerptips voor schaduwen
Gebruik rgba() of hsla() kleuren — halfTransparante schaduwen zien er natuurlijker uit.
Houd de lichtbron consistent — gebruik dezelfde offsetrichting in je hele interface.
Vermijd puur zwart — een donkere tint van je merkkleur creëert zachtere schaduwen.
Privacy
Alle schaduwgeneratie draait 100% in je browser. Er worden geen gegevens naar een server gestuurd.