CSS doosschaduwgenerator
Maak de box-shadow-waarden visueel. Stel de horizontale en verticale verschuiving in pixels in, de straal van de vervaging (zachte rand), de spreiding (de schaduw groter of kleiner maken voordat deze vervaagt), de kleur, de dekking en optionele inzet voor binnenste schaduwen. Het voorbeeldvak wordt live bijgewerkt; kopieer de volledige box-shadow-declaratie naar je CSS. Begrijp hoe elke parameter de hoogte en diepte verandert zonder vallen en opstaan in devtools.
X (px)
Y (px)
Vervaging (px)
Spreiding (px)
Kleur
Dekking (0–1)
CSS
box-shadow: 0px 8px 24px 0px rgba(20, 20, 20, 0.18);
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.
Wanneer kies je iets anders
• Als je meerdere gestapelde schaduwen nodig hebt, kopieer dan de eerste laag hier en voeg er meer toe in CSS.
• Als je tekstschaduw wilt: een andere eigenschap met vergelijkbare syntaxis.
• Als je slagschaduw nodig hebt op onregelmatige PNG vormen — filter: slagschaduw() werkt mogelijk beter.
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.
Schaduwen in lagen aanbrengen
Meerdere schaduwen gescheiden door komma's: vakschaduw: 0 1px 2px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15); Eerste schaduwverven onder latere. Combineer een strakke donkere schaduw met een brede lichte schaduw voor realistische diepte.
Toegankelijkheid en prestaties
Zware schaduwen op grote geanimeerde gebieden kunnen GPU-verftijd kosten. Geef de voorkeur aan subtiele schaduwen voor gebruikersinterfaces met veel gegevens. Zorg ervoor dat gefocuste elementen zichtbaar blijven — vertrouw niet alleen op schaduw om de staat weer te geven; combineer met rand of omtrek voor toetsenbordgebruikers.
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.
Worden waarden naar een server verzonden?
Nee. Preview en CSS zijn lokaal.
Is dit gratis?
Ja. Gebruik hem zonder account.