Box-shadow-generator
Stel meerlaagse CSS-schaduwen samen met live preview.
- Direct
- Gratis
- Privé (lokaal verwerkt)
- Zonder registratie
Schaduwen met echte diepte, zonder gokken
Een schaduw met de hand instellen betekent de pagina tien keer herladen. Hier verschuif je de schuifregelaars en reageert de preview live. Stapel meerdere lagen voor realistische diepte en kopieer de exacte CSS.
-
Pas de laag aan
X/Y-verschuiving, vervaging, spreiding, kleur en dekking.
-
Voeg lagen toe
Meng een scherpe en een diffuse schaduw voor een natuurlijke look.
-
Kopieer de CSS
De volledige box-shadow-eigenschap, klaar om te plakken.
De syntaxis begrijpen
| Waarde | Rol |
|---|---|
| offset-x | Horizontale verschuiving (rechts indien positief) |
| offset-y | Verticale verschuiving (omlaag indien positief) |
| blur | Vervagingsstraal (groter = zachter) |
| spread | Vergroot (+) of verkleint (−) de schaduw |
| color | Kleur, vaak rgba() voor de dekking |
| inset | Plaatst de schaduw binnen de box |
Alles wordt in je browser gegenereerd. Standaardvoorbeeld: box-shadow: 0px 10px 25px -5px rgba(124, 58, 237, 0.35);
Veelgestelde vragen
Wat betekenen de box-shadow-waarden?
In volgorde: horizontale verschuiving, verticale verschuiving, vervagingsstraal, spreidingsstraal en dan de kleur. Voorbeeld: “0 10px 25px -5px rgba(124, 58, 237, 0.35)” verschuift de schaduw 10px omlaag, vervaagt haar over 25px en verkleint haar met 5px.
Waar dient de spreidingsstraal (spread) voor?
Hij vergroot (positieve waarde) of verkleint (negatieve waarde) de schaduw vóór de vervaging. Een negatieve spread is ideaal voor zachte, ingetrokken schaduwen, zoals een kaart die net boven de pagina zweeft.
Hoe stapel ik meerdere schaduwen?
Scheid elke laag met een komma. De eerst genoemde wordt bovenaan getekend. Een strakke, scherpe schaduw combineren met een brede, diffuse ziet er veel natuurlijker uit dan één schaduw.
Wat is het verschil tussen box-shadow en drop-shadow?
box-shadow volgt de rechthoek van de box (en de border-radius). filter: drop-shadow() volgt de echte vorm, inclusief transparantie — ideaal voor uitgesneden PNG’s en SVG’s. Voor een kaart of knop is box-shadow de juiste keuze.