De werking van de CSS box-shadow eigenschap
De CSS-eigenschap box-shadow voegt schaduweffecten toe aan het frame van een HTML-element. Met de Box Shadow Generator kunnen deze effecten visueel worden ontworpen door middel van schuifregelaars, waarna de tool direct de bijbehorende CSS-code genereert.
Een standaard schaduw wordt gedefinieerd door een reeks numerieke waarden voor de positie, de scherpte en de grootte, aangevuld met een kleurdefinitie. De generator vertaalt de visuele instellingen naar de correcte CSS-syntaxis. Wanneer er meerdere schaduwen worden gecombineerd, worden deze in de CSS-code weergegeven als een door komma's gescheiden lijst.
De rol van offset, blur en spread
Het gedrag en het uiterlijk van een schaduw worden bepaald door vier fysieke eigenschappen die onafhankelijk van elkaar kunnen worden ingesteld:
- Horizontale offset: Deze waarde bepaalt de positie van de schaduw op de x-as. De schuifregelaar heeft een bereik van -50px tot 50px. Een positieve waarde verschuift de schaduw naar rechts, terwijl een negatieve waarde de schaduw naar links verplaatst.
- Verticale offset: Deze waarde regelt de positie op de y-as, met een bereik van -50px tot 50px. Positieve waarden verplaatsen de schaduw naar beneden, en negatieve waarden verplaatsen de schaduw omhoog.
- Vervaging (blur): Dit regelt hoe zacht de randen van de schaduw worden. Het bereik loopt van 0px (volledig scherp) tot 100px (maximaal vervaagd). Hoe hoger deze waarde, hoe groter en lichter de overgang van de schaduw naar de achtergrond.
- Spreiding (spread): Deze parameter vergroot of verkleint de schaduw in alle richtingen voordat de vervaging wordt toegepast. Het bereik ligt tussen -50px en 50px. Een positieve waarde vergroot de schaduw, terwijl een negatieve spreiding de schaduw naar binnen trekt. Dit laatste is nuttig voor het creëren van een zeer compacte, subtiele schaduw onder een element.
Normale schaduwen versus binnenschaduwen (inset)
Standaard werpt een element een schaduw naar buiten toe, wat de suggestie wekt dat het element boven de achtergrond zweeft. Door de optie 'Binnenschaduw (inset)' in te schakelen, verandert de richting van de schaduw.
De schaduw wordt dan aan de binnenkant van de randen van het element getekend. Dit visuele effect verandert de perceptie van de gebruiker: het element lijkt niet langer boven de pagina te zweven, maar lijkt in de pagina te zijn gedrukt. Deze techniek wordt in webdesign veelvuldig toegepast om verzonken invoervelden of ingedrukte knoppen te simuleren.
Diepte en realisme door gestapelde schaduwlagen
In de fysieke wereld werpt een lichtbron zelden een enkele, harde schaduw. Om realistische diepte te creëren in een digitale interface, is het stapelen van meerdere schaduwen noodzakelijk. Een enkele schaduwlaag met een grote vervaging ziet er vaak modderig of plat uit.
Door gebruik te maken van de knop 'Laag toevoegen' kunnen meerdere schaduwen over elkaar heen worden gelegd. De generator pre-rendert standaard vijf lagen, waarbij de eerste laag actieve standaardwaarden heeft van 0 8 24 -4 met een transparantie van 18% zwart. De overige vier lagen zijn initieel verborgen en kunnen naar wens worden geactiveerd en aangepast.
Een realistische opbouw van een "raised card" (een zwevende kaart) maakt bijvoorbeeld gebruik van:
- Een zeer nauwe, donkere schaduw met een kleine offset en minimale blur om de directe fysieke grens te markeren.
- Een tweede, zachtere schaduwlaag met een grotere offset en een grotere blur-waarde om de omgevingsschaduw te simuleren.
Indien een laag niet langer gewenst is, kan deze via de knop 'Laag verwijderen' uit de stapel worden gewist.
Privacy en lokale verwerking
Bij het gebruik van deze generator blijft de privacy van uw ontwerpkeuzes gewaarborgd. Elke schaduw wordt in je browser gerenderd. Niets van wat je hier instelt, wordt geüpload naar BroBroGo. Alle berekeningen en visuele aanpassingen vinden direct lokaal plaats op uw eigen systeem.
Veelgestelde vragen
Wat bepalen offset, blur en spread precies?
De offset verplaatst de schaduw naar links/rechts en omhoog/omlaag, blur verzacht de randen, en spread vergroot of verkleint de schaduw vóór het vervagen. Een negatieve spread trekt de schaduw naar binnen, wat handig is voor een compacte, subtiele schaduw.
Wat doet de optie 'inset'?
Een normale schaduw valt buiten het element, zoals licht achter een zwevende kaart. Inset draait dit om naar de binnenkant, waardoor het element ingedrukt lijkt — handig voor verzonken invoervelden of ingedrukte knoppen.
Waarom zou ik meerdere schaduwlagen stapelen?
Een enkele schaduw ziet er vanaf een bepaalde grootte al snel plat uit. Echte diepte combineert meestal een scherpe, donkere schaduw met een zachte, bredere schaduw — voeg een tweede laag toe en stel ze onafhankelijk van elkaar in om dat effect te bereiken.