CSS box-shadow generator
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);Drop Shadow
Laatst bijgewerkt: 2026 · Gratis online tool
Wat is CSS box-shadow generator?
Gratis online CSS box-shadow-generator met regelaars voor offset, blur, spread, kleur en inset, die een live preview van de schaduw geeft en kopieerklare box-shadow-CSS-code voor elk element oplevert.
Gebruiksaanwijzing
- 1 Preset selecteren — Begin snel met een presetknop.
- 2 Schuifregelaars aanpassen — Pas de schaduw aan met X/Y-offset, vervaging en verspreiding schuifregelaars.
- 3 Voorbeeld — Controleer het resultaat in realtime in het voorbeeld hierboven.
- 4 CSS kopiëren — Gebruik de kopieerknop om de box-shadow CSS te kopiëren.
Gerelateerde tools
CSS-gradiëntgenerator Gratis visuele CSS-gradiëntgenerator: ontwerp lineaire, radiale en conische gradiënten, pas kleurstops en hoek aan en kopieer de kant-en-klare CSS-code voor je achtergronden.
CSS border-radius generator Gratis online CSS border-radius-generator met acht onafhankelijke hoekhandvatten en schuifregelaars, die een live preview van de afgeronde vorm geeft en kopieerklare border-radius-CSS-code oplevert.
CSS Flexbox-generator Gratis online CSS Flexbox-playground met een visuele editor voor justify-content, align-items, flex-direction en wrap, die een live layout-preview toont en kopieerklare Flexbox-CSS voor uw container genereert.
Veelgestelde vragen
Ja, gebruik de knop 'Schaduw toevoegen' om meerdere schaduwen over elkaar te leggen.
Ja, schakel het Inset-selectievakje in bij elke schaduw om een binnenste schaduw te maken.
Vijf presets worden aangeboden: Subtle, Medium, Large, Inset en Double.
Ja, u kunt rgba(0,0,0,0.15) rechtstreeks in het kleurinvoerveld invoeren.
Nee. Alle berekeningen gebeuren in de browser.