Ontwerp

CSS Box Shadow Generator

Ontwerp box-shadows visueel.

Achtergrond: CSS Gradient Generator · lay-out: CSS Flexbox Generator.

Hoe te gebruiken

Begin vanuit een voorinstelling of één laag, voeg vervolgens lagen toe voor diepte. Schakel inzet voor gedrukte/neumorfe effecten. Kopieer de door komma's gescheiden waarde naar box-shadow.

FAQ

Kan ik meerdere schaduwen stapelen?

Ja — voeg lagen toe om een zachte omgevingsschaduw te combineren met een scherpe contactschaduw, of stapel gekleurde gloedlagen. Elke laag heeft een eigen verschuiving, vervaging, spreiding, kleur en inset-schakelaar.

Wat doen de voorinstellingen?

Startpunten met één klik: kaartdiepte in Stripe-stijl, verhoogd of ingedrukt neumorfisme, Material-diepte en een zachte gloed — stel de schuifregelaars na toepassing bij.

Hoe gebruik ik de uitvoer?

Kopieer de box-shadow-regel naar je CSS. Meerdere lagen worden met komma’s gescheiden, precies zoals browsers verwachten.

Laatst bijgewerkt: