CSS-boxschaduwgenerator
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
Een box-shadow declaratie heeft zes bewegende delen — X- en Y-offset, blur, spread, kleur en het optionele inset-keyword — en de enige manier om ze goed te krijgen is door ze te zien. Deze generator legt elk onderdeel op een schuifregelaar en toont het resultaat op een voorbeeldkaart terwijl je sleept, zodat de CSS-regel onderaan altijd precies is wat je ziet.
Schaduwen in de echte wereld zijn zelden een enkele laag. De lagenlijst laat je tot vier schaduwen stapelen in één declaratie: een strakke donkere lijn voor randdefinitie plus een brede zachte wassing voor verhoging, of het lichte-en-donkere paar dat neumorfisme definieert. Selecteer een laag om deze te bewerken, verwijder wat je niet nodig hebt en de gecombineerde box-shadow waarde werkt live bij.
Schaduwen lezen heel anders op donkere interfaces, waar een zwarte schaduw op een bijna-zwarte pagina simpelweg verdwijnt. De achtergrondschakelaar van de voorvertoning wisselt de achtergrond tussen licht en donker, zodat je beide thema's kunt controleren voordat je live gaat. Vooraf ingestelde pagina's dekken de varianten waar mensen echt naar zoeken: een zachte verhogingsschaduw, een inset-verdieping, het neumorfisme-recept met twee lagen en een subtiele kaartschaduw.
Zoals elke tool op deze site is de generator gratis en draait hij volledig in je browser: geen upload, geen account, en hij blijft offline werken zodra de pagina is geladen.