Box-shadow generator: waar dit voor dient
De eigenschap box-shadow neemt vijf waarden in een specifieke volgorde, en het verschil tussen vervaging en spreiding is niet meteen duidelijk uit de syntax. Deze generator geeft schuifregelaars en een live voorbeeld om de schaduw natuurlijk te laten ogen en de resulterende CSS te kopiëren.
Box-shadow generator: hoe het werkt
- Pas de horizontale en verticale verschuiving aan om de lichtrichting te bepalen.
- Verhoog de vervaging voor een zachte rand en de spreiding om de schaduw groter of kleiner te maken.
- Kies kleur en dekking, of zet de binnenschaduw (inset) aan.
- Kopieer de gegenereerde CSS.
Veelgestelde vragen
Wat is het verschil tussen vervaging en spreiding?
Vervaging verzacht de rand van de schaduw zonder de grootte te veranderen. Spreiding vergroot of verkleint de vorm vóórdat die wordt vervaagd, dus een negatieve spreiding met veel vervaging geeft een strakke, subtiele schaduw.
Hoe krijg ik een realistische schaduw?
Combineer er twee of drie: een korte, donkere schaduw dicht bij het element en een brede, vage verder weg bootsen echt licht veel beter na dan één zware schaduw. Genereer elke laag hier en voeg ze samen, gescheiden door komma's.
Wanneer gebruik ik een binnenschaduw?
Voor elementen die verzonken moeten lijken: ingedrukte knoppen, invoervelden en verzonken panelen. De schaduw wordt binnen de rand getekend in plaats van erbuiten.
Beïnvloeden schaduwen de prestaties?
Grote vervagingsradiussen op veel elementen kunnen renderingtijd kosten, vooral tijdens scrollen. Merk je problemen, verklein dan de vervagingsradius of promoot het element naar zijn eigen laag.