CSS box-shadow generator

CSS-box-shadow-generator met regelaars voor offset, blur, spread, kleur en inset en een live voorbeeld van de schaduw. Kopieer de kant-en-klare box-shadow-CSS, gratis in je browser.

box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);

Achtergrond

Boxkleur

Slagschaduw

Inset

X-offset: 4px

Y-offset: 4px

Vervaging: 10px

Spreiding: 0px

Kleur

Insluiten

<iframe src="https://devtools.patrache.studio/nl/generators/css-box-shadow/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="CSS box-shadow generator — Patrache Studio DevTools"></iframe>
<p><a href="https://devtools.patrache.studio/nl/generators/css-box-shadow/">CSS box-shadow generator</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

Laatst bijgewerkt: 2026 · Gratis online tool

Wat is CSS box-shadow generator?

CSS-box-shadow-generator met regelaars voor offset, blur, spread, kleur en inset en een live voorbeeld van de schaduw. Kopieer de kant-en-klare box-shadow-CSS, gratis in je browser.

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ëntgeneratorVisuele CSS-gradient-generator voor lineaire, radiale en conische verlopen: zet kleurstops, pas de hoek aan en kopieer de CSS. Ideaal voor achtergronden en knoppen, gratis in je browser.

CSS border-radius generatorCSS-border-radius-generator met acht onafhankelijke hoekgrepen en schuifregelaars en een live voorbeeld van de afgeronde vorm. Kopieer de kant-en-klare border-radius-CSS, gratis in je browser.

CSS Flexbox-generatorCSS-Flexbox-playground met een visuele editor voor justify-content, align-items, flex-direction en wrap, plus een live layoutvoorbeeld. Genereer kant-en-klare Flexbox-CSS, gratis in je browser.

Kleurcode ConverterKleurconverter tussen HEX-, RGB-, HSL- en OKLCH-codes, met de WCAG-contrastverhouding van twee kleuren. Zo controleer je toegankelijkheid terwijl je een palet kiest, gratis in je browser.

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.