Wat is CSS Box Shadow Builder?
box-shadow is een van de meest gebruikte CSS-eigenschappen voor het toevoegen van diepte en verhoging aan elementen, maar de meerwaardige syntaxis kan verwarrend zijn, vooral bij het combineren van offset, blur, spread, kleur en het inset-keyword. Deze tool maakt de eigenschap visueel door een live preview te tonen terwijl u elke waarde aanpast, zodat u precies kunt zien hoe de schadow zich gedraagt voordat u deze aan uw stylesheet toevoegt.
Snel antwoord
Genereer een box-shadow-declaratie door offset, blur, spread, kleur en inset aan te passen. De live preview toont de schadow op een statische div zodat u de waarden kunt afstemmen voordat u ze aan uw stylesheet toevoegt.
Last updated: 2026-06-11
Beperkingen
- De preview is een statische div zonder omringende context. Een schaduw die er in isolatie correct uitziet, kan anders verschijnen tegen een echte pagina-achtergrond of nabij andere elementen.
- De tool genereert één schaduw per keer. Voor gelaagde of meerdere schaduwen moet u de waarden handmatig combineren in uw stylesheet.
- De box-shadow-eigenschap creëert schaduwen die de CSS-box van het element volgen, niet de zichtbare vorm. Gebruik voor niet-rechthoekige elementen met transparante achtergronden of CSS clip-path-vormen het drop-shadow-filter voor een schaduw die de zichtbare contouren volgt.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Pas de horizontale en verticale offset aan om de schaduwpositie te verplaatsen.
- Stel de blur-radius en spread in om de zachtheid en grootte te regelen.
- Kies een schaduwkleur en schakel inset in als de schaduw binnen het element moet verschijnen.
- Kopieer de gegenereerde CSS-declaratie en plak deze in uw stylesheet.
Waarvoor je het kunt gebruiken
- Voeg subtiele verhoging toe aan kaarten, modals en dropdown-menu's.
- Maak inset-ingedrukte effecten voor knoppen en formuliervelden.
- Bouw gelaagde schaduwen door meerdere box-shadow-waarden te combineren voor realistische diepte.