CodeKitHubWat is deze tool?
box-shadow is de CSS-eigenschap die een schaduw achter (of binnen) een element tekent. Handmatig geschreven neemt het tot vijf waarden in volgorde — horizontale offset, verticale offset, vervagingsradius, spreidingsradius en een kleur — plus een optioneel inset-trefwoord, wat allemaal makkelijk door elkaar te halen is of bij de eerste poging te subtiel/te zwaar uitpakt.
Deze tool zet dat om in directe manipulatie: versleep een schuifregelaar, zie de schaduw veranderen in het live voorbeeldvak, en kopieer de exacte CSS zodra het er goed uitziet. De kleurkiezer plus een dekkingsschuifregelaar genereert automatisch een correcte rgba()-waarde, aangezien transparante schaduwen doorgaans beter ogen dan volledig ondoorzichtige.
Waarom gebruiken?
- Live voorbeeld werkt direct bij terwijl je een instelling aanpast — zie de exacte schaduw voordat je je aan code verbindt.
- Volledige controle over offset-x, offset-y, vervaging, spreiding, kleur en dekking op één plek.
- Eén klik voegt inset toe voor een ingedrukte/verzonken look in plaats van een zwevende dropshadow.
- Genereert direct plakklare CSS met de kleur al omgezet naar rgba() bij je gekozen dekking.
- Draait volledig in je browser — niets wat je instelt wordt ergens geüpload.
- Gratis, geen registratie, werkt op mobiel.
Hoe te gebruiken
- Stel offset-x en offset-y in om de schaduw te positioneren — positieve waarden duwen hem naar rechts/onder, negatieve waarden naar links/boven.
- Verhoog de vervagingsradius om de rand van de schaduw te verzachten; verhoog de spreiding om de schaduw groter te maken dan het element zelf.
- Kies een kleur en pas de dekking aan — de meest realistische schaduwen gebruiken 15–40% dekking in plaats van vol zwart.
- Vink 'inset' aan als je wilt dat de schaduw binnen de rand van het element verschijnt in plaats van erachter.
- Kopieer de gegenereerde CSS en plak die in je stylesheet.
Voorbeeld
Invoer
Offset: 0px, 10px · Vervaging: 20px · Spreiding: 0px · Kleur: zwart bij 35% dekkingUitvoer
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);Een zachte schaduw direct onder het element zonder horizontale offset — een van de meest voorkomende schaduwstijlen voor kaarten en knoppen.
Enkele schaduw versus gelaagde schaduwen
Deze tool bouwt één schaduwlaag, wat de overgrote meerderheid van het praktijkgebruik dekt — knoppen, kaarten, modals en dropdowns gebruiken bijna altijd één schaduw. CSS ondersteunt wel door komma's gescheiden meerdere schaduwen op hetzelfde element voor uitgebreidere dieptesffecten (bijvoorbeeld een strakke, donkere schaduw gelaagd onder een zachte, brede), maar dat is een verfijning die je zelf handmatig kunt toevoegen: genereer hier één schaduw, dupliceer dan de regel, pas de tweede set waarden aan, en verbind ze met een komma.
Veelvoorkomende box-shadow-patronen
- Subtiele kaartverheffing: kleine offset (0–4px), gematigde vervaging (8–16px), 10–20% dekking zwart.
- Verheven modal/dropdown: grotere offset (4–10px) en vervaging (20–30px), 20–35% dekking voor een sterker zwevend gevoel.
- Ingedrukte knop: vink inset aan, gebruik een kleine, naar binnen aanvoelende offset en gematigde vervaging zodat de schaduw als een deuk in plaats van een verheffing overkomt.
- Gekleurde gloed: kies een merkkleur in plaats van zwart, verhoog de dekking naar 40–60%, en verhoog de spreiding iets voor een zacht gloei-effect rond knoppen.
- Scherpe/harde schaduw: zet vervaging op 0 en spreiding op 0 voor een vaste, verschoven silhouet in plaats van een zachte schaduw.
Combineren met afgeronde hoeken
Schaduwen en afgeronde hoeken worden voortdurend samen gebruikt — kaarten, knoppen en modals combineren bijna altijd beide. Gebruik de Border Radius Generator om de hoeken van hetzelfde element af te ronden, en pas beide gegenereerde CSS-declaraties samen toe.
Veelgestelde vragen
Wat is het verschil tussen vervaging en spreiding?
Vervagingsradius verzacht de rand van de schaduw — hogere waarden laten hem geleidelijker uitdoven. Spreidingsradius verandert de grootte van de schaduw vóór het vervagen — een positieve spreiding maakt de schaduw aan alle kanten groter dan het element, een negatieve spreiding krimpt hem. De meeste alledaagse schaduwen gebruiken vervaging met spreiding op 0.
Waarom rgba() gebruiken in plaats van een gewone hexkleur voor de schaduw?
Een volledig ondoorzichtige schaduw oogt hard en onrealistisch — echte schaduwen zijn altijd enigszins transparant, waardoor wat erachter zit licht doorschemert. Met rgba() stel je die transparantie direct in, waarom deze tool de kleur altijd met een alfawaarde uitvoert in plaats van een vaste hexkleur.
Wat doet het inset-trefwoord?
Zonder inset wordt de schaduw buiten de rand van het element getekend, alsof het element boven de pagina zweeft. Met inset wordt de schaduw juist binnen de rand getekend, waardoor het element ingedrukt of verzonken oogt — vaak gebruikt voor actieve/ingedrukte knopstatussen of invoervelden.
Kan ik meer dan één schaduw op hetzelfde element stapelen?
Ja — CSS box-shadow accepteert een door komma's gescheiden lijst, en browsers renderen ze in de opgegeven volgorde (de eerste schaduw ligt bovenop). Een gangbare techniek combineert een strakke, donkerdere schaduw met een bredere, zachtere voor realistischer diepte dan één schaduw alleen biedt.
Beïnvloedt box-shadow de opmaak of alleen het uiterlijk?
Alleen het uiterlijk — box-shadow beïnvloedt nooit de grootte van het element of de positie van omliggende elementen, zelfs niet bij grote vervagings- of spreidingswaarden. Wordt de schaduw visueel afgesneden, controleer dan op overflow: hidden bij een bovenliggend element in plaats van de eigen waarden van de schaduw.