CSS-schaduwgenerator
Ontwerp CSS box-schaduwen met livevoorbeeld en kopieer-klaar code.
Snel antwoord: CSS-schaduwgenerator: ontwerp CSS-schaduwen met livevoorbeeld en direct kopieerbare code. Werkt volledig in je browser, gratis en zonder registratie.
Laatst bijgewerkt
Goed om te weten
The CSS box-shadow property takes up to four length values in a fixed order — horizontal offset, vertical offset, blur radius, spread radius — followed by a color. The order matters and is easy to misremember: a positive vertical offset pushes the shadow down, and the blur radius softens the edge while the spread radius grows or shrinks the whole shadow before it is blurred. Dragging the sliders here removes the guesswork and shows the result instantly.
For realistic depth, keep shadows subtle: a small offset, a generous blur and a low opacity read as a natural drop shadow, whereas a hard, opaque shadow looks like a 1990s bevel. A widely used technique is to stack several shadows with increasing blur to mimic how light actually diffuses — you can do that by pasting multiple declarations separated by commas, since a single box-shadow accepts a comma-separated list.
Two things to know: adding the inset keyword flips the shadow to the inside of the element, which is handy for pressed-button and inset-field effects, and box-shadow does not affect layout or the element's box size the way border does, so it never nudges neighboring elements. For rounded corners that the shadow will follow, pair this with the border-radius generator, and check any shadowed text stays legible with the contrast checker.
Veelgestelde vragen
- Is de box-shadow generator gratis?
- Ja — gratis, geen registratie.
- Kan ik meerdere schaduwen toevoegen?
- De generator geeft een enkele schaduw; combineer de output met komma's als je gelaagde schaduwen nodig hebt.
- Welke eenheid wordt gebruikt?
- Pixels — de meest voorkomende eenheid voor box-shadow offsets.
- Ondersteunt de output inset?
- Niet in deze versie — stel inset handmatig in op de resulterende CSS als je het nodig hebt.
- Worden mijn instellingen opgeslagen?
- Nee — de preview en CSS draaien volledig in je browser.