Genereer CSS box-shadows met live preview. Voeg meerdere lagen toe voor diepte en kopieer de CSS.
Gebruik sliders voor horizontale/verticale offset, blur, spread, kleur en opacity. Vink Inset aan voor een inner shadow. De preview update live en de CSS is klaar om te kopiëren.
Pas de sliders aan. Vink Inset aan voor een inner shadow. Klik het kleurvakje om de kleur te wijzigen. De CSS update live — klik Kopiëren om te kopiëren.
Schaduwen zijn een van de snelste manieren om een gebruiker te laten zien wat boven de pagina ligt, wat ingedrukt kan worden en wat los van de achtergrond moet aanvoelen. In de praktijk gaat het nuttige werk niet over het uit het hoofd schrijven van box-shadow-syntaxis. Het gaat om het vinden van een dieptebehandeling die past bij het component, de achtergrond en de rest van de interface.
Deze tool maakt van die zoektocht een zichtbaar afstelproces in plaats van giswerk op basis van losse getallen.
Deze tool is nuttig omdat hij die trial-and-error zichtbaar en bestuurbaar maakt.
Een goed afgestelde schaduw kan een paneel net genoeg van de pagina losmaken om als eigen laag te lezen.
Sommige controls hebben diepte nodig om klikbaar te voelen. Te weinig en ze ogen plat; te veel en ze voelen zwaar of gedateerd.
Zwevende UI moet zich visueel onderscheiden van de inhoud erachter. Schaduwen zijn een van de eenvoudigste manieren om dat verschil te maken.
Als een component een enorme schaduw nodig heeft om op te vallen, zit het probleem misschien eerder in de layout-hiërarchie dan in de schaduw zelf.
Zware schaduwen maken een interface snel modderig. Kleine verhogingen hebben vaak meer visueel effect dan verwacht.
Dezelfde schaduw die op een witte pagina goed werkt, kan er op een donkere of drukke ondergrond totaal verkeerd uitzien.
Dit is een goed gebruiksgeval omdat kleine visuele verschillen tellen en je vaak iets subtielers nodig hebt dan je uit het hoofd zou schrijven.
Inset-schaduwen zijn nuttig wanneer een veld of control verzonken in plaats van verhoogd moet aanvoelen.
Als een team al een specifieke schaduwstijl gebruikt, maakt een generator het makkelijker om exact dezelfde waarde te hergebruiken in plaats van te gokken.
Deze tool genereert schaduw-CSS. Hij beslist niet of een component op een hogere laag thuishoort, of het hele visuele systeem in balans is, of het effect overal passend is. Hij helpt met de schaduw zelf, niet met de volledige UI-hiërarchie.
Schaduwen zijn van die details die mensen pas opmerken wanneer ze verkeerd aanvoelen. Een generator helpt sneller uit te komen op iets dat “goed voelt”, met minder willekeurig bijstellen.
Spread vergroot (positief) of verkleint (negatief) de totale grootte van de schaduw. Een positieve spread maakt de schaduw groter dan het element zelf; een negatieve spread maakt deze kleiner.
Hoewel deze simpele tool één schaduw genereert, ondersteunt CSS meerdere door komma's gescheiden waarden voor box-shadow om complexe gelaagde effecten te creëren.
Deze tool draait volledig in je browser. Niets wat je typt of plakt wordt naar een server gestuurd — alle verwerking gebeurt lokaal op je apparaat.