Inset CSS box-shadow — Kant-en-klare 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 het inset-vinkvakje al aangekruist, zodat de schaduw binnen het element wordt getekend in plaats van erachter. De voorbeeldkaart toont het verzonken effect meteen, en elke schuifregelaar blijft de CSS-regel live bijwerken.
Inset-schaduwen zijn hoe CSS diepte naar binnen fakes: ingedrukte knoppen, zoekvelden en invoervelden, voortgangsbalkgoten en gegraveerde panelen vertrouwen er allemaal op. Omdat de schaduw de binnenrand knuffelt, gedragen blur en spread zich net iets anders dan bij een normale slagschaduw — de schuifregelaars hier laten je dat verschil meteen voelen.
Als de verzonken look klopt, kopieer dan de box-shadow regel in je stylesheet. Je kunt ook een inset-laag combineren met gewone buitenlagen — voeg een tweede laag toe en vink inset daar uit om beide te mengen in één declaratie.