CSS doosschaduwgenerator
Maak de box-shadow-waarden visueel.
Zo maak je een box-shadow
1. Stel de X- en Y-offset in: positieve X verplaatst de schaduw naar rechts, positieve Y verplaatst deze naar beneden.
2. Pas de vervaging (zachtheid) en de spreiding (grootte vóór vervaging) aan.
3. Kies schaduwkleur en dekking.
4. Schakel de inzet in als de schaduw in het vak moet verschijnen; kopieer CSS.
Schaduw recepten
Zachte kaartverhoging
offsetY 8px, vervaging 24px, spreiding 0, zwart met een dekking van 18% - een zwevende kaart in materiaalstijl: box-shadow: 0 8px 24px rgba(20,20,20,0.18).
Scherpe slagschaduw
vervaging 0, spreiding 0, offsetY 4px — harde rand zoals een sticker die iets van de pagina is getild.
Inzet ingedrukte knop
Inzet met kleine vervaging inschakelen: simuleert een ingedrukte of verzonken knop in het element.
Wanneer gebruik je deze tool
• Wanneer je de UI-diepte voor kaarten, modals en knoppen afstemt.
• Als je leert hoe vervaging verschilt van spreiding.
• Wanneer je ontwerptokens met exacte schaduwwaarden documenteert.
Het lezen van de vier cijfers
box-shadow: 0 8px 24px 0 betekent x=0, y=8px omlaag, vervaging=24px, spreiding=0. Laat de spreiding weg en de standaardspreiding van de browser is 0. Grote vervaging zonder verschuiving creëert een gloed; grote offset met kleine onscherpte zorgt voor gericht licht.
Veelgestelde vragen
Wat is de syntaxis van de box-shadow?
vakschaduw: offset-x offset-y vervagingsstraal spreidingsstraal kleur; Optioneel inzettrefwoord maakt een innerlijke schaduw.
Vervagen versus verspreiden?
Vervaging verzacht de schaduwrand. Spreiding vergroot of krimpt de schaduwvorm voordat deze vervaagt: positieve spreiding wordt groter, negatieve krimpt.
Welke eenheden moet ik gebruiken?
Deze tool voert pixels (px) uit, de meest gebruikelijke keuze voor scherm-UI-schaduwen.
Wat doet inzet?
Inset tekent de schaduw binnen het grensvak van het element — handig voor verzonken ingangen of putten.
Kan schaduwkleur semi-transparant zijn?
Ja. Er wordt dekking toegepast op de gekozen kleur, waardoor RGBA-uitvoer ontstaat voor vloeiende randen over gevarieerde achtergronden.