CSS box-shadow generator: live preview, code kopiëren
Stel verschuiving, vervaging, spreiding, kleur en dekking in voor een CSS box-shadow-waarde, bekijk de live preview en kopieer de code.
CSS box-shadow generator
Deze generator bouwt één CSS box-shadow-waarde uit zes instellingen: horizontale verschuiving, verticale verschuiving, vervagingsstraal, spreidingsstraal, een schaduwkleur met een eigen dekkingsschuif en een inset-schakelaar. Twee extra kleurkiezers bepalen het voorbeeldvak en de achtergrond ervan, zodat de schaduw goed leesbaar blijft op een lichte of donkere ondergrond, en vier voorinstellingen, soft, hard, glow en inset, laden met één klik een kant-en-klare combinatie. Elke wijziging werkt direct de box-shadow-regel onder het voorbeeld bij, klaar om te kopiëren.
Hoe de box-shadow-waarde tot stand komt
CSS schrijft een schaduw in een vaste volgorde: horizontale verschuiving, verticale verschuiving, vervagingsstraal, spreidingsstraal, dan een kleur; om de schaduw binnen de rand van het vak te tekenen in plaats van erachter, wordt het woord inset ervoor gezet. Horizontale en verticale verschuiving verplaatst de schaduw zijwaarts of verticaal, en beide aanvaarden negatieve waarden tot -50px, zodat een schaduw links van het vak kan vallen of erboven kan staan. De vervagingsstraal, van 0 tot 100px, verzacht de rand van de schaduw, en de spreidingsstraal, van -50 tot 50px, vergroot of verkleint de schaduw onafhankelijk van de grootte van het vak zelf. De hexwaarde van de kleurkiezer wordt opgesplitst in de rood-, groen- en blauwcomponenten, en de dekkingsschuif, van 0 tot 1, wordt de vierde waarde binnen rgba(); bij 0 is de schaduw volledig doorzichtig, bij 1 komt hij precies overeen met de gekozen kleur.
Uitgewerkt voorbeeld
Met een horizontale verschuiving van 0px, een verticale van -6px, een vervaging van 10px en een spreiding van 2px, samen met de schaduwkleur #db2777 en een dekking van 0,4, ontstaat box-shadow: 0px -6px 10px 2px rgba(219, 39, 119, 0.4). De hexcode #db2777 splitst zich op in rood 219, groen 39 en blauw 119, en de 0,4 van de dekkingsschuif wordt zonder verdere omzetting de vierde rgba()-waarde. Inset inschakelen met dezelfde zes waarden tekent de identieke schaduw binnen de rand van het vak in plaats van erachter, een effect dat vaak gebruikt wordt voor ingedrukte knoppen of verzonken invoervelden.
Kopieerbare CSS-uitvoer
.kaart {
box-shadow: 0px -6px 10px 2px rgba(219, 39, 119, 0.4);
}