CSS Box-Shadow Generator

Wat is CSS box-shadow?

De CSS-eigenschap box-shadow voegt een of meer schaduwen toe aan een element. Schaduwen creëren diepte en laten elementen zoals kaarten, knoppen en dialoogvensters opvallen.

De box-shadow syntax

De syntax is: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;. Offset-X en Offset-Y bepalen de schaduwpositie. De vervagingsradius regelt de zachtheid, de spreidingsradius vergroot of verkleint de schaduw.

Tips voor mooie schaduwen

• Gebruik meerdere schaduwen met verschillende vervagingswaarden voor realistischere resultaten.
• Houd schaduwkleuren subtiel — gebruik transparante zwarte tinten in plaats van felle kleuren.
• Inset-schaduwen werken uitstekend voor ingedrukte knoppen en invoervelden.
• Test schaduwen in zowel lichte als donkere modus, want ze kunnen er anders uitzien.