CSS Box Shadow Generator

Wat is een CSS-schaduwgenerator?

Een CSS-schaduwgenerator maakt box-shadow en text-shadow effecten visueel. Pas offset, vervaging, spreiding en kleur aan met schuifregelaars en kopieer de gegenereerde CSS-code.

Schaduwen voegen diepte en dimensie toe aan webdesign. Subtiele schaduwen (elevation) zijn een kernonderdeel van Material Design en moderne UI-frameworks.

box-shadow syntaxis

box-shadow: offset-x offset-y blur spread color inset. Voorbeeld: box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.2). Offset bepaalt positie, blur de zachtheid, spread de grootte, inset maakt het een binnenliggende schaduw.

Hoe gebruikt u deze tool?

Gebruik de schuifregelaars om offset, vervaging, spreiding en kleur aan te passen. Het voorbeeld wordt live bijgewerkt. Voeg meerdere schaduwlagen toe voor complexe effecten. Kopieer de CSS met een klik.

Tips voor effectieve schaduwen

• Gebruik subtiele schaduwen met lage transparantie voor een schone, moderne, opgetilde uitstraling.
• Combineer meerdere schaduwen voor realistischere diepte — een scherpe nabije schaduw plus een zachte gediffundeerde schaduw bootst echte verlichting na.
• Een grotere blur met een kleine offset creëert een zacht zwevend effect, ideaal voor kaarten en modals.
• Negatieve spread creëert een strakkere, meer gefocuste schaduw, nuttig voor subtiele randen.
• Houd de schaduwrichting consistent op uw hele pagina — inconsistente lichtbronnen zien er onnatuurlijk uit.

Elevation-systemen

Google's Material Design definieert elevatieniveaus van 0dp tot 24dp, elk met specifieke schaduwwaarden. Hogere elevatie betekent grotere blur- en offsetwaarden. Dit systeem zorgt voor een consistente visuele hiërarchie in een applicatie. Zelfs als u Material Design niet volgt, is het principe van consistente elevatieniveaus waardevol voor elk ontwerpsysteem.

Prestaties

box-shadow met grote blur-waarden kan de prestaties beïnvloeden, vooral bij animaties. Gebruik will-change: transform voor geanimeerde elementen. Overweeg filter: drop-shadow() voor niet-rechthoekige vormen.

Veelgestelde vragen

Wat is het verschil tussen box-shadow en drop-shadow?

box-shadow volgt de doosrand (rechthoek). filter: drop-shadow() volgt de daadwerkelijke vorm van het element, inclusief transparante PNG's. drop-shadow ondersteunt geen spread of inset.

Hoe maak ik een zachte, moderne schaduw?

Gebruik meerdere lagen met lage dekking: box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.1). Vermijd harde randen (meer blur, minder offset). Gebruik rgba of hsla met een lage alfa-waarde (0.05-0.15).