CSS Box Shadow-generator

Wat doet box-shadow eigenlijk?

box-shadow tekent een schaduw rond (of, met inset, binnen) de border box van een element. Elke laag bestaat uit maximaal zes waarden: een optioneel inset-keyword, X- en Y-offsets, blur-radius, spread-radius en een kleur. Meerdere lagen, gescheiden door komma's, stapelen in bronvolgorde, waarbij de eerste laag bovenop wordt getekend. Die stapeling geeft moderne UI-schaduwen hun diepte: een strakke, donkere laag voor het contactpunt, een zachte, brede laag voor omgevingslicht, soms een subtiele gekleurde gloed bovenop. Deze generator biedt een live, transparant-geblokt podium zodat je precies kunt zien hoe de schaduw valt — inclusief subtiele effecten die op een platte achtergrond verdwijnen. Je kunt elke waarde slepen met de slider voor snel afstemmen, een exact pixelgetal typen wanneer een designer specs aanlevert, en lagen herordenen wanneer de schildersvolgorde uitmaakt. De output omvat zowel ruwe CSS als de arbitrary-value-syntax van Tailwind (shadow-[...]), en de huidige schaduwstack wordt gecodeerd in de URL-hash zodat een deelbare link aan de andere kant exact dezelfde schaduw opnieuw opbouwt. Er is geen server-roundtrip — alles rendert client-side terwijl je invoer wijzigt.

Hoe gebruik je het

1. Begin met een preset

De rij voorinstellingen geeft je zes gangbare startpunten. Subtiel en Zacht werken goed voor kaarten; Scherp is de platte 8-bit look; Neumorfisch heeft een gekleurde achtergrond nodig om te werken; Gloed werkt op donkere UI; Diep is voor modals.

2. Tweak de waarden

Elke laag heeft X-/Y-offsets, blur, spread, kleur en dekking, en een inset-toggle. Sleep de sliders voor live feedback of typ exacte getallen in het vak naast elke slider.

3. Stapel en herorden

Klik op Laag toevoegen om meer schaduwen te stapelen. Elke nieuwe laag wordt toegevoegd met neutrale standaardwaarden. Gebruik de pijltjes omhoog/omlaag om te herordenen — de eerste laag wordt als laatste geschilderd (bovenop de andere).

4. Kopieer de uitvoer

Kopieer de CSS direct in je stylesheet, of pak de Tailwind arbitrary-value-class voor inline gebruik. Deel-URL kopiëren geeft je een link die exact dezelfde stack opnieuw opbouwt — handig om naar een designer te sturen.

CSS box-shadow-syntax-uitsplitsing

De volledige syntax is box-shadow: [inset] <x-offset> <y-offset> <blur-radius> <spread-radius> <color>. X-/Y-offsets verplaatsen de schaduw horizontaal en verticaal. Een positieve Y duwt de schaduw naar beneden (de conventie voor licht dat van boven komt). Blur-radius verzacht de randen; 0 is een harde schaduw. Spread-radius vergroot of verkleint de schaduw voordat de blur wordt toegepast — positieve waarden maken hem groter, negatieve waarden trekken hem strakker zodat hij vanaf de randen tevoorschijn piept in plaats van uit te puilen. Kleur accepteert elke CSS-kleur, maar rgba() met een lage alpha oogt meestal beter dan een volledig dekkende donkere kleur — schaduwen in de echte wereld zijn gedeeltelijke afdekkingen, geen verf. Het optionele inset-keyword tekent binnen het vak, handig voor ingedrukte-knoppen-effecten. Meerdere schaduwen gescheiden door komma's stapelen van voor naar achter: de eerste wint waar ze overlappen.

Waarden kiezen die er goed uitzien

Kaarten / panelen: Y-offset van 4–12px, blur 12–28px, spread -2 tot -8, alpha 0,08–0,20. Twee lagen (een strakke, een brede) doen het meestal beter dan één sterke laag. Knoppen: Y van 1–2px, blur 2–4px, zeer lage alpha — denk aan contactschaduw. Modals: Y van 20–40px, blur 40–80px, negatieve spread, alpha 0,25–0,45. Gloed: X en Y van 0, blur 20–60px, kleur is het merkaccent op 30–60% alpha. Inset: kleine offsets (1–2px) en minimale blur voor besturingselementen in ingedrukte staat. Vermijden: puur zwart op volle alpha — dat verplettert alles eronder. Gebruik de tint van de paginaachtergrond, donkerder gemengd, voor schaduwen die echt verbonden voelen.

Veelgestelde vragen