Zo gebruik je Box-shadow generator
- 1
Kies een beginschaduw
Klik op een voorinstelling zoals Zacht, Gelaagd of Hoogte 2, of pas de standaardlaag aan.
- 2
Vorm elke laag
Selecteer een laag en stel de X- en Y-verschuiving, vervaging, uitbreiding, kleur, dekking en inset in.
- 3
Controleer het op jouw oppervlak
Wijzig de boxgrootte, hoekafronding en kleuren zodat ze passen bij het element dat je opmaakt.
- 4
Kopieer de CSS
Kopieer de box-shadow-declaratie of de Tailwind-klasse naar je code.
Limieten en Pro
Gratis zonder account: onbeperkt aantal lagen, verschuivingen van −100 tot 100 px, vervaging tot 200 px en 12 schaduwvoorinstellingen.
Pro verwijdert de advertenties; de schaduweditor is bij elk abonnement compleet. Pro bekijken
Over Box-shadow generator
De CSS-eigenschap box-shadow werkt met een lijst van lagen. Elke laag heeft een horizontale en verticale verschuiving, een vervagingsstraal, een uitbreidingsafstand, een kleur en optioneel het sleutelwoord inset. Voor natuurlijk ogende diepte moet je dat allemaal over twee of meer lagen op elkaar afstemmen, en dat is lastig als je losse getallen in een stylesheet aanpast. Deze editor toont het resultaat op een live voorbeeldbox terwijl je aan de schuifregelaars sleept, en schrijft de declaratie en een Tailwind-klasse shadow-[…] voor je uit.
Voeg zoveel lagen toe als je wilt, verberg er tijdelijk een om te vergelijken, verplaats een laag omhoog of omlaag – de eerste laag in de lijst wordt bovenaan getekend – of zet een laag op inset voor ingedrukte knoppen en invoervelden. De verschuivingen lopen van −100 tot 100 pixels, de vervaging tot 200 pixels en de uitbreiding van −100 tot 100, en elke kleur heeft een eigen dekking. Negatieve uitbreiding is de truc achter moderne zachte schaduwen: de schaduw wordt onder het element naar binnen getrokken, zodat er alleen een subtiele gloed onder zichtbaar blijft.
De voorbeeldbox kun je in grootte aanpassen en voorzien van elke hoekafronding, boxkleur en achtergrondkleur. Zo beoordeel je de schaduw op het echte oppervlak van je ontwerp, ook in donkere thema's waar schaduwen meer dekking of een gekleurde gloed nodig hebben.
Er zijn twaalf beginpunten ingebouwd: vier Material Design-hoogteniveaus, een zachte enkele laag, een vijflaagse vloeiende schaduw, een harde neubrutalistische verschuiving, neumorfisme, een binnenschaduw, een gekleurde gloed, een omtrekring in focusstijl en een zwevende kaart. Verlopen vind je op het andere tabblad; tekstschaduwen en het filter drop-shadow() vallen buiten deze tool.
Privacy
De schaduw wordt volledig op deze pagina opgebouwd en getoond, en je lagen worden alleen in de lokale opslag van deze browser bewaard, zodat ze een herlading overleven. Er worden geen instellingen of ontwerpen naar een server gestuurd.