Zachte 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 vooraf geladen met een zachte schaduw: geen horizontale offset, 8px omlaag, een ruime 24px blur en een lage 12% zwarte dekking. De voorbeeldkaart geeft het direct weer — beweeg een schuifregelaar en de CSS-regel volgt in realtime.
Zachte schaduwen zijn het werkpaard van moderne interfaces. Een grote blur in combinatie met een lage dekking tilt een kaart van de pagina zonder een harde contour te tekenen. Daarom houden de meeste designsystemen hun verhogingsschaduwen precies in dit bereik, in plaats van de dichte, donkere schaduwen van het vroege flat design.
Kopieer de box-shadow regel direct in je stylesheet, of stapel tot drie extra lagen voor een rijkere verhoging. De generator draait volledig in je browser — er wordt niets geüpload.