Stel horizontale en verticale offset, blur, spread en kleur in om een box-shadow te bouwen. Voorvertoning wordt live bijgewerkt. Kopieer de CSS. Draait in je browser.
box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2);
Over CSS box-shadow-generator
Box-shadow voegt een schaduw achter een element toe. Deze tool laat je de horizontale en verticale offset, blur-radius, spread en kleur instellen (met optionele inset). De voorvertoning en CSS worden bijgewerkt wanneer je waarden wijzigt. Kopieer het resultaat naar je stylesheet.
Hoe te gebruiken
- Pas offset, blur, spread en kleur aan. Vink Inset aan voor een binnenste schaduw.
- Kopieer de gegenereerde CSS en plak het in je project.
Belangrijkste kenmerken
- Interactieve schuifregelaars voor offset, blur, spread en kleur met realtime voorvertoning
- Inset-schakelaar voor binnenste schaduweffecten (ingedrukte knoppen, verdiepte elementen)
- CSS kopiëren met één klik — klaar om in elk stylesheet te plakken
- Live voorvertoningsvak toont precies hoe de schaduw wordt gerenderd
- 100% browsergebaseerd — geen gegevens verlaten je apparaat
- Werkt samen met de CSS Gradiëntgenerator voor complete visuele CSS-authoring
Wanneer dit hulpmiddel te gebruiken
- Diepte en hoogte toevoegen aan kaarten, knoppen en modals in je UI
- Material design of neumorfisme schaduweffecten maken
- Schaduwstijlen prototypen voordat je ze vastlegt in code
- Leren hoe de CSS box-shadow property-parameters het uiterlijk beïnvloeden
- Snel CSS genereren zonder ontwikkelaarstools of een ontwerpprogramma te openen
Technische details
De gegenereerde CSS volgt de standaard box-shadow-syntaxis: [inset] offset-x offset-y blur spread color. Offsetwaarden kunnen negatief zijn (schaduw beweegt naar links of omhoog). Blur-radius moet niet-negatief zijn; hogere waarden produceren zachtere schaduwen. Spread vergroot (positief) of verkleint (negatief) de schaduw ten opzichte van de elementgrootte. De kleur kan alfatransparantie bevatten voor subtiele effecten (bijv. rgba(0,0,0,0.2)). De tool geeft standaard CSS uit die wordt ondersteund door alle moderne browsers zonder vendor prefixes.
Conclusie
De CSS Box Shadow Generator vereenvoudigt het proces van het maken van perfecte box-schaduwen met een visuele, interactieve interface. Krijg productieklare CSS in seconden zonder trial-and-error coderen — alles draait privé in je browser.
Veelgestelde vragen
Wat is inset?
Wordt mijn invoer naar een server gestuurd?
Kan ik meerdere schaduwen gebruiken?
Heb ik vendor prefixes nodig?
box-shadow-property wordt ondersteund door alle moderne browsers (Chrome, Firefox, Safari, Edge) zonder vendor prefixes. Alleen zeer oude browsers (IE8 en lager) missen ondersteuning.