CSS box-shadow-generator

Maak box-shadow-CSS met live preview.

Developer

Stel horizontale en verticale offset, blur, spread en kleur in om een box-shadow te bouwen. Voorvertoning wordt live bijgewerkt. Kopieer de CSS. Draait in je browser.

box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2);

Over CSS box-shadow-generator

Box-shadow voegt een schaduw achter een element toe. Deze tool laat je de horizontale en verticale offset, blur-radius, spread en kleur instellen (met optionele inset). De voorvertoning en CSS worden bijgewerkt wanneer je waarden wijzigt. Kopieer het resultaat naar je stylesheet.

Hoe te gebruiken

  1. Pas offset, blur, spread en kleur aan. Vink Inset aan voor een binnenste schaduw.
  2. Kopieer de gegenereerde CSS en plak het in je project.

Veelgestelde vragen

Wat is inset?
Inset tekent de schaduw binnen het element in plaats van buiten. Handig voor ingedrukte of verdiepte effecten.
Wordt mijn invoer naar een server gestuurd?
Nee. De CSS wordt in je browser opgebouwd. Er wordt niets geüpload.
Kan ik meerdere schaduwen gebruiken?
Deze tool genereert één schaduw. Voor meerdere schaduwen kopieer de uitvoer en voeg meer comma-gescheiden waarden toe aan box-shadow.