CSS box-shadow maken met live voorbeeld
Met deze CSS box-shadow generator ontwerp je visueel een schaduw voor kaarten, knoppen, panelen en andere HTML-elementen. Pas de horizontale en verticale positie, blur, spread, kleur, dekking en inset-instelling aan. Het voorbeeld en de CSS-code worden direct bijgewerkt. Je kunt meerdere schaduwlagen combineren en het resultaat naar je stylesheet kopiëren.
De syntaxis van box-shadow
Een basisregel ziet er als volgt uit: box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);. De eerste lengte is de horizontale verschuiving, de tweede de verticale verschuiving, gevolgd door vervagingsstraal en verspreidingsstraal. Daarna staat de kleur. Het optionele sleutelwoord inset verandert een buitenschaduw in een schaduw aan de binnenkant.
De generator schrijft kleuren als rgba(), zodat kleur en dekking afzonderlijk kunnen worden ingesteld. Moderne CSS ondersteunt ook andere kleurvormen, maar de gegenereerde notatie is breed herkenbaar.
X- en Y-offset instellen
Een positieve X-waarde verplaatst de schaduw naar rechts en een negatieve waarde naar links. Een positieve Y-waarde beweegt haar omlaag en een negatieve waarde omhoog. Voor een neutrale gloed gebruik je vaak 0 voor beide offsets. Voor een realistisch hoogte-effect is een kleine positieve Y-offset gebruikelijk, omdat licht in interfaces vaak denkbeeldig van boven komt.
Blur en spread begrijpen
De blur-radius bepaalt hoe zacht de rand wordt. Nul geeft een scherpe vorm; een hogere waarde verspreidt de overgang over een groter gebied. De spread-radius vergroot of verkleint de schaduw vóór de vervaging. Een positieve spread maakt haar groter, terwijl een negatieve spread de zichtbare vorm kan terugtrekken.
Blur en spread zijn niet onderling verwisselbaar. Een grote blur met lage dekking geeft een zachte diepte, terwijl hoge spread en weinig blur eerder op een omlijning of gloed lijken.
Meerdere schaduwen combineren
CSS accepteert meerdere box-shadows, gescheiden door komma's. De tool maakt voor iedere laag afzonderlijke instellingen. Zo kun je een korte donkere contactscherpte combineren met een brede, lichtere omgevingsschaduw. Een neon-effect gebruikt vaak meerdere gekleurde lagen met verschillende blur- en spreadwaarden.
De volgorde is relevant: de eerste schaduw wordt boven latere schaduwen getekend. Houd het aantal lagen beperkt wanneer een subtiel ontwerp voldoende is.
Inset-schaduw en vooraf ingestelde stijlen
Met inset verschijnt de schaduw binnen de rand van het element. Dit kan een ingedrukt veld, verzonken paneel of binnenrand suggereren. De generator bevat presets voor subtiele, grote, gekleurde, material-achtige en neon-schaduwen. Gebruik ze als uitgangspunt en pas waarden aan de achtergrond en componentgrootte aan.
Toegankelijkheid en prestaties
Een schaduw kan visuele hiërarchie ondersteunen, maar mag niet het enige signaal zijn voor focus, klikbaarheid of fouten. Zorg ook voor duidelijke randen, focusstijlen en voldoende kleurcontrast. Zeer grote blurgebieden en veel gestapelde schaduwen kunnen de rendering belasten, vooral bij animatie of grote aantallen elementen.
CSS toepassen
Kopieer de gegenereerde declaratie naar de gewenste selector. Test het resultaat op lichte en donkere achtergronden en bij verschillende schermgroottes. Een schaduw die op een groot voorbeeld goed oogt, kan op een kleine knop te zwaar zijn. Gebruik consistente schaduwniveaus binnen een ontwerp zodat dezelfde visuele hoogte overal dezelfde betekenis houdt.
Reacties