# Ontwerp CSS-schaduwen visueel in plaats van waarden te raden
box-shadow handmatig aanpassen is vervelend. Deze visuele generator laat je meerdere schaduwen stapelen, live bekijken en productieklaar CSS kopiëren. 5 Schaduwlagen per element
Live Voorbeeld bij elke wijziging
5 Snelle presets
# Stapel meerdere schaduwen voor realistische diepte
Echte schaduwen zijn zelden uniform. Een strakke schaduw dicht bij het element stapelen met een zachtere, bredere creëert natuurlijke diepte. Gebruik + om lagen toe te voegen.# Elke CSS-instelling begrijpen
| Bediening | CSS-waarde | Effect |
|---|---|---|
| Offset X | 1e lengte | Horizontale verplaatsing. |
| Offset Y | 2e lengte | Verticale verplaatsing. |
| Vervaging | 3e lengte | Blur-radius. |
| Spreiding | 4e lengte | Vergroot of verkleint de schaduw. |
| Kleur & Dekking | rgba() | Schaduwkleur met onafhankelijke dekking. |
| Binnen | inset | Schaduw binnen de elementrand. |
Gebruik een subtiel achtergrondraster
Het voorbeeld toont een raster met punten zodat je de uitloop van de schaduw ziet. Gebruik een negatieve spread om de schaduw dichter bij het element te houden.Aanbevolen workflow
Begin met een preset.
Voeg lagen toe voor realistische diepte.
Gebruik negatieve spread voor zwevende kaarten.
Kopieer de CSS en plak deze.