Box Shadow Generator

Over deze tool

Horizontaal — positief verplaatst de schaduw naar rechts, negatief naar links. Verticaal — positief naar beneden, negatief naar boven. Vervaging — grotere waarden creëren zachtere, meer diffuse schaduwen. Verspreiding — positief vergroot de schaduw, negatief verkleint hem.

Schakel inset in om binnenste schaduwen te maken. Voeg meerdere schaduwen toe met "+ Schaduw toevoegen" — ze worden gescheiden door komma's in de CSS-uitvoer, gelaagd van voor naar achter.

Hoe te gebruiken

1. Pas de Horizontaal- en Verticaal-schuifregelaars aan om de schaduwverschuiving in te stellen.
2. Vergroot de Vervaging voor een zachte schaduw, of stel in op 0 voor een harde schaduw.
3. Gebruik Verspreiding om de schaduw buiten het element te vergroten of te verkleinen.
4. Klik op "+ Schaduw toevoegen" om meerdere schaduwen te stapelen voor rijkere effecten.

Gebruiksscenario's

Ontwerpers gebruiken box-shadow voor diepte en hoogte in kaartcomponenten. Inset-schaduwen creëren ingedrukte knopeffecten. Meerdere gestapelde schaduwen produceren realistisch licht met omgevingslicht en hoofdlicht.

Veelgestelde vragen

• Wat is de inset-optie? — Inset-schaduwen verschijnen aan de binnenkant van de elementgrens in plaats van buiten. Ze zijn handig voor het maken van ingedrukte effecten op invoervelden en knoppen.
• Kan ik meerdere schaduwen toevoegen? — Ja. Klik op "+ Schaduw toevoegen" om een extra schaduwlaag toe te voegen. Alle schaduwen worden gecombineerd in één door komma's gescheiden box-shadow-declaratie.
• Wat doet een negatieve verspreidingswaarde? — Een negatieve verspreiding krimpt de schaduw kleiner dan het element. Gecombineerd met verschuiving en vervaging creëert dit een subtiele schaduw die slechts aan één kant uitsteekt.