Card Shadow CSS — Subtiele box-shadow-code
Creëer visueel CSS-vakschaduwcode: schuifregelaars voor offset, vervaging, spreiding, kleur met dekking, inzetmodus en maximaal vier lagen met een live voorbeeld.
Resultaat
Op deze pagina wordt de voorinstelling van de box-shadow-generator geopend naar een klassieke kaartschaduw: 2px omlaag, 8px vervaging, 15% zwarte dekking. Het is opzettelijk stil – genoeg om een kaart van de pagina te scheiden zonder zichzelf aan te kondigen – en het voorbeeld laat precies zien hoe stil.
Dit bereik komt overeen met de laagste hoogtestappen in de meeste ontwerpsystemen: lijstkaarten, vervolgkeuzemenu's, popovers en tabelrijen bij zweven. Als je een sterkere lift nodig hebt voor modals of zwevende panelen, verhoog dan de Y-offset en vervaag ze samen. Ze moeten proportioneel groeien om de lichtbron geloofwaardig te houden.
Kopieer de doosschaduwlijn naar uw componentstijlen, of dupliceer deze als een tweede laag met een strakkere vervaging om randdefinitie toe te voegen. De tool is gratis en draait volledig in uw browser.