CSS Box Shadow Generator

Over CSS Box Shadow Generator

Met de CSS Box Shadow Generator ontwerp je box-shadows visueel in plaats van waarden in code te raden. Sleep aan schuifregelaars voor horizontale en verticale verschuiving, waas-radius, spreidingsradius, kleur en dekking — met een inset-schakelaar — en zie een echt element live bijwerken. Als het er goed uitziet, kopieer je met één klik de kant-en-klare CSS.

Moderne UI-schaduwen bestaan zelden uit één laag. Deze generator ondersteunt gestapelde schaduwlagen: lagen toevoegen, dupliceren, verbergen of verwijderen, en de geselecteerde laag apart of alle lagen samen bekijken. Een strakke donkere schaduw onder een zachte brede schaduw stapelen is hoe verzorgde kaarten en knoppen hun diepte krijgen.

Je kunt ook het voorbeeldelement zelf stylen — vakkleur, hoekafronding en canvasachtergrond — zodat de schaduw beoordeeld wordt in een realistische context, ook op donkere ondergronden. Begin met een preset, klik op “Laag randomiseren” voor inspiratie, en reset wanneer je opnieuw wilt beginnen. Alles draait in je browser.

Hoe gebruik je CSS Box Shadow Generator

1. Pas de schuifregelaars aan voor horizontale verschuiving, verticale verschuiving, waas, spreiding, kleur en dekking, en schakel “Inset shadow” in als je een binnenschaduw wilt.
2. Klik op “Laag toevoegen” of “Laag dupliceren” om schaduwen te stapelen, en wissel de voorbeeldmodus tussen “Deze laag” en “Alle lagen” om elke laag te verfijnen.
3. Stel het element en canvas af — vakkleur, hoekafronding en achtergrond — zodat het voorbeeld overeenkomt met je echte ontwerp.
4. Pas een preset toe of gebruik “Laag randomiseren” als je liever een startpunt hebt dan een lege set schuifregelaars.
5. Kopieer de volledige CSS-regel (of alleen de waarde) en plak deze in je stylesheet.

Veelgestelde vragen