Belangrijkste punten
- 01Elke box-shadow parameter heeft een eigen schuifregelaar plus een numerieke invoer voor pixel-nauwkeurige afstemming.
- 02De inset-schakelaar wisselt tussen dropshadow en inner shadow voor ingedrukte of neumorfische effecten.
- 03Kleur en dekking worden afzonderlijk beheerd en voeren rgba() uit voor leesbare CSS.
- 04De preview gebruikt de echte CSS-eigenschap op een echt element — wat je ziet is precies wat je stylesheet rendert.
Waarom een visuele Box-Shadow Generator gebruiken
CSS box-shadow neemt tot zes waarden — horizontale offset, verticale offset, vervagingsstraal, spreidingsstraal, kleur en een optioneel inset-trefwoord. Ze uit het hoofd typen werkt voor eenvoudige schaduwen, maar voor alles wat genuanceerder is — een strakke gloed, een diepe dropshadow, een zachte elevatielaag — gok je en herlaad je totdat iets er goed uitziet.
Een visuele generator verkort die iteratielus. Verplaats een schuifregelaar, zie de verandering direct en kopieer alleen wanneer je tevreden bent. De box-shadow generator van Handytool draait volledig in je browser, dus de preview is de echte CSS-eigenschap toegepast op een echt element — geen renderingsverschillen tussen het hulpmiddel en je werkelijke pagina.
Hoe ontwerp je een Box Shadow
- 01
Pas de horizontale en verticale offsets aan
Positieve waarden verplaatsen de schaduw naar rechts en beneden. Negatieve waarden verplaatsen deze naar links en boven. Een gecentreerde schaduw (0, 0) creëert een gloed-effect.
- 02
Stel de vervagingsstraal in
Hogere vervagingswaarden creëren zachter, meer diffuse schaduwen. Nulvervaging produceert een harde, solide schaduwomtrek.
- 03
Pas de spreidingsstraal aan
Positieve spreiding vergroot de schaduw voordat vervaging wordt toegepast. Negatieve spreiding verkleint deze, wat handig is voor strakke schaduwen onder elementen.
- 04
Kies een kleur en dekking
Gebruik de kleurkiezer om de schaduwkleur te kiezen, en draai vervolgens de dekking omlaag voor subtiliteit. De uitvoer gebruikt rgba() om de waarden leesbaar te houden.
- 05
Schakel inset in indien nodig
Inset wisselt van dropshadow naar inner shadow — handig voor ingedrukte knoppen, ingezonken invoervelden en neumorfische oppervlakken.
- 06
Kopieer de CSS-declaratie
Klik op Kopiëren om de volledige box-shadow-waarde te pakken en plak deze in je stylesheet.
Geen upload, geen account
De generator is volledig client-side. Je kleurkeuzes, numerieke waarden en preview-statussen blijven in je browser — niets wordt naar een server verzonden. Er is geen account om aan te maken en geen gebruikslimiet.
Omdat het preview-element de echte CSS box-shadow eigenschap gebruikt, is de uitvoer per definitie nauwkeurig — er is geen canvas-rendering of screenshot-benadering betrokken. De pixelwaarden die je kopieert, zijn de pixelwaarden die de browser toepast.
Veelgestelde vragen over Box-Shadow Generator
Wat doet de spreidingswaarde?
Positieve spreiding vergroot de schaduw in alle richtingen voordat vervaging wordt toegepast; negatieve spreiding verkleint deze. Handig voor strakke, gedefinieerde gloeien in combinatie met lage vervaging.
Kan ik meerdere box shadows toevoegen?
Deze generator voert één schaduw tegelijk uit. Om ze te stapelen, kopieer je de waarde en scheidt je meerdere schaduwen met komma's in je CSS — box-shadow accepteert een kommagescheiden lijst.
Waarom is mijn inset schaduw onzichtbaar?
Inset schaduwen worden in het element getekend, dus ze hebben een achtergrondkleur of zichtbare opvulling nodig om te verschijnen. Ze verschijnen niet op transparante of nulgrootte elementen.
Is de preview pixel-nauwkeurig?
Ja — de preview gebruikt de echte CSS box-shadow eigenschap op een echt DOM-element, dus wat je ziet is precies wat je stylesheet zal produceren.
Wat is een neumorfische schaduw?
Neumorfisme gebruikt twee schaduwen — één licht en één donker — offset in tegengestelde richtingen om een element verheven of ingedrukt van een plat oppervlak te laten lijken. Beide schaduwen zijn doorgaans inset voor de ingedrukte variant.