Box Shadow Generator
Gratis online CSS-box-shadow-generator, realtime voorbeeld
CSS box-shadow-syntaxis
De CSS-eigenschap box-shadow voegt schaduw-effecten toe rond een element. Syntaxis: box-shadow: [inset] offset-x offset-y blur spread color. Meerdere schaduwen kunnen worden gescheiden door komma's. Gebruik de visuele editor om waarden aan te passen en het resultaat in realtime te zien.
De box-shadow-generator gebruiken
Pas de schuifregelaars aan voor offset X, offset Y, blur-radius en spread-radius. Kies een schaduwkleur en schakel de inset-optie in of uit. De gegenereerde CSS-code wordt in realtime bijgewerkt en kan naar het klembord worden gekopieerd.
▶Wat is het verschil tussen blur en spread?
Blur bepaalt hoe zacht de schaduwranden zijn (0 = scherpe rand, hogere waarden = zachter). Spread vergroot of verkleint de schaduw in alle richtingen. Positieve spread maakt de schaduw groter dan het element.
▶Kan ik meerdere schaduwen toevoegen?
Ja, CSS ondersteunt meerdere schaduwen gescheiden door komma's: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);. Combineer subtiele schaduwen voor een realistisch diepteeffect.
▶Wat doet een inset-schaduw?
Een inset-schaduw verschijnt aan de binnenkant van het element in plaats van aan de buitenkant. Het creëert de indruk dat het element naar binnen is gedrukt, zoals een tekstveld of ingedrukte knop.