Kaartschaduw CSS — Subtiele box-shadow code
Bouw visueel een CSS box-shadow op: schuifregelaars voor offset, blur, spread, kleur met dekking, inset-modus en tot vier lagen met een live voorvertoning.
Wordt volledig in uw browser verwerkt. Niets wat u hier invoert, wordt ooit geüpload.
Resultaat
Over dit hulpmiddel
Deze pagina opent de box-shadow generator met een vooraf ingestelde klassieke kaartschaduw: 2px omlaag, 8px blur, 15% zwarte dekking. Hij is bewust stil — genoeg om een kaart van de pagina te scheiden zonder op te vallen — en de voorvertoning toont precies hoe stil.
Dit bereik komt overeen met de laagste verhogingsstappen in de meeste ontwerpsystemen: lijstkaarten, dropdownmenu's, popovers en tabelrijen bij hover. Als je een sterkere til nodig hebt voor modals of zwevende panelen, verhoog dan de Y-offset en blur samen — ze moeten in verhouding groeien om de lichtbron geloofwaardig te houden.
Kopieer de box-shadow regel in je componentstijlen, of dupliceer hem als een tweede laag met een strakkere blur om randdefinitie toe te voegen. De tool is gratis en draait volledig in je browser.