Box Shadow Generator

Ontwerp schaduwen met live feedback

Een goed afgestelde box-shadow kan een interface gelaagd, klikbaar en verzorgd laten aanvoelen. Een slecht afgestelde schaduw kan dezelfde interface troebel of inconsistent laten ogen. Deze generator geeft je directe controle over de waarden die ertoe doen: horizontale verschuiving, verticale verschuiving, vervaging, spreiding, kleur, dekking en inset-modus. Terwijl je elke schuifregelaar beweegt, worden het voorbeeld en de CSS-uitvoer direct bijgewerkt, zodat je gemakkelijker een natuurlijk resultaat vindt dan met het met de hand intypen van getallen.

De uitvoer is een standaard CSS-declaratie en werkt dus voor kaarten, modals, knoppen, dropdowns, navigatiebalken en elk ander element dat box-shadow accepteert. Er worden geen afbeeldingen gemaakt en er wordt niets geüpload. De browser past de schaduw simpelweg toe op het voorbeeldelement en kopieert de uiteindelijke CSS wanneer je klaar bent.

Verschuiving, vervaging en spreiding begrijpen

Horizontale en verticale verschuiving plaatsen de schaduw verder van het element af. Een positieve verticale verschuiving suggereert vaak dat het object boven de pagina zweeft, terwijl een schaduw met weinig verschuiving eerder als een gloed aanvoelt. Vervaging bepaalt de zachtheid: weinig vervaging geeft een harde, grafische rand, terwijl meer vervaging een realistischer, diffuse schaduw oplevert. Spreiding verandert de grootte van de schaduw voordat de vervaging wordt toegepast. Positieve spreiding maakt de schaduw breder en zwaarder; negatieve spreiding maakt hem strakker, zodat de vervaging subtieler aanvoelt.

Schaduwen gebruiken in een designsysteem

Schaduwen zijn het meest effectief als ze consistent zijn. Verzin niet voor elk component een nieuwe schaduw, maar maak een kleine hoogteschaal: een subtiele schaduw voor kaarten, een sterkere voor popovers en een geconcentreerde voor modals. Test schaduwen op zowel lichte als donkere vlakken, want dezelfde dekking kan op een lichte achtergrond te sterk en op een donkere te zwak aanvoelen. Inset-schaduwen zijn handig voor ingedrukte toestanden, verzonken invoervelden en verdiepte panelen, maar gebruik ze spaarzaam zodat bedieningselementen duidelijk en toegankelijk blijven.