CSS Box-schaduwgenerator

Een box-shadow-declaratie heeft zes bewegende delen – X- en Y-offset, vervaging, spreiding, kleur en het optionele inset-trefwoord – en de enige manier om ze goed te krijgen is door ze te zien. Deze generator plaatst elk onderdeel op een schuifregelaar en geeft het resultaat weer op een voorbeeldkaart terwijl u sleept, zodat de CSS-regel onderaan altijd precies is waar u naar kijkt.

Schaduwen uit de echte wereld bestaan zelden uit één enkele laag. Met de lagenlijst kunt u maximaal vier schaduwen in één declaratie stapelen: een strakke donkere lijn voor randdefinitie plus een brede zachte wassing voor hoogte, of het licht-donkerpaar dat neumorfisme definieert. Selecteer een laag om deze te bewerken, verwijder de lagen die u niet nodig hebt en de gecombineerde waarde-updates van de box-shadow worden live.

Schaduwen lezen heel anders op donkere interfaces, waarbij een zwarte schaduw op een bijna zwarte pagina eenvoudigweg verdwijnt. Met de voorbeeldachtergrondschakelaar schakelt u de achtergrond tussen licht en donker, zodat u beide thema's kunt controleren voordat u deze verzendt. Vooraf ingestelde pagina's behandelen de varianten waar mensen daadwerkelijk naar zoeken: een zachte elevatieschaduw, een inzetput, het tweelaagse neumorfismerecept en een subtiele kaartschaduw.

Zoals elke tool op deze site is de generator gratis en draait hij volledig in uw browser: geen upload, geen account, en hij blijft offline werken zodra de pagina is geladen.