Schaduw generator.

Genereer CSS box-shadows met live preview. Voeg meerdere lagen toe voor diepte en kopieer de CSS.


          
        

Gebruik sliders voor horizontale/verticale offset, blur, spread, kleur en opacity. Vink Inset aan voor een inner shadow. De preview update live en de CSS is klaar om te kopiëren.

Zo gebruik je het

Pas de sliders aan. Vink Inset aan voor een inner shadow. Klik het kleurvakje om de kleur te wijzigen. De CSS update live — klik Kopiëren om te kopiëren.

Voorbeelden

Soft lift box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.20)
Hard drop box-shadow: 6px 6px 0px 0px rgba(0,0,0,0.80)
Inset press box-shadow: inset 0px 2px 6px 0px rgba(0,0,0,0.25)

FAQ

What does Spread do?

Spread expands (positive value) or contracts (negative value) the shadow before blur is applied. A positive spread makes the shadow larger than the element; negative makes it smaller.

Can I combine multiple shadows?

CSS supports multiple box-shadows as a comma-separated list. Generate each shadow here separately and combine them manually in your CSS: box-shadow: shadow1, shadow2;

Gerelateerde tools

Privacy en gegevensverwerking

Deze tool draait volledig in je browser. Niets wat je typt of plakt wordt naar een server gestuurd — alle verwerking gebeurt lokaal op je apparaat.