CSS-box-shadow-generator

Wat is CSS-box-shadow-generator?

De CSS-box-shadow-generator is een gratis visuele editor voor de CSS-eigenschap box-shadow, gemaakt voor front-endontwikkelaars en ontwerpers. Voeg een of meer schaduwlagen toe en stel per laag offset-x, offset-y, vervagingsstraal, spread-straal, kleur en de inset-optie in met eenvoudige getalvelden en een kleurkiezer. Een voorbeeldvak op een dambordachtergrond toont het gecombineerde resultaat in realtime, en de volledige box-shadow-declaratie — met elke laag gescheiden door komma's — wordt voor je gegenereerd om te kopiëren. Gebruik het om zachte hoogteschaduwen, scherp neumorfisme, glow-effecten of gelaagde diepte in Material-stijl te maken zonder de volgorde van de waarden uit je hoofd te leren.

CSS-box-shadow-generator gebruiken

1. Stel offset-x en offset-y van de eerste laag in (in px) om de schaduw horizontaal en verticaal te verplaatsen; negatieve waarden verplaatsen hem naar links of omhoog.
2. Pas de vervagingsstraal aan (hoe zacht de schaduw is) en de spread-straal (hoe ver hij groeit of krimpt).
3. Kies een kleur met het staal of typ een hex-waarde — een hex van 8 tekens zoals #00000040 stelt de transparantie van de schaduw in.
4. Vink het inset-selectievakje aan om de schaduw binnen het element te tekenen in plaats van erbuiten.
5. Klik op Laag toevoegen om er nog een schaduw bovenop te stapelen en herschik door de waarden te bewerken; verwijder elke laag met de prullenbakknop.
6. Bekijk hoe het voorbeeld bijwerkt en kopieer dan de gegenereerde box-shadow-CSS naar je stylesheet.

Voorbeelden

x 0, y 4, vervaging 12, spread 0, kleur #00000040

box-shadow: 0px 4px 12px 0px #00000040;

Laag 1: 0 1 2 0 #0000001a · Laag 2: 0 8 24 -4 #00000026

box-shadow: 0px 1px 2px 0px #0000001a, 0px 8px 24px -4px #00000026;

inset aangevinkt, x 0, y 2, vervaging 6, spread 0, kleur #00000059

box-shadow: inset 0px 2px 6px 0px #00000059;

Veelgestelde vragen

Wat is de volgorde van de box-shadow-waarden?

Elke laag wordt geschreven als offset-x, offset-y, vervagingsstraal, spread-straal, kleur, met een optioneel inset-trefwoord ervoor. Deze tool geeft alle vier de lengtes altijd in px weer (offset-x, offset-y, vervaging, spread), zodat de volgorde eenduidig is en achteraf eenvoudig met de hand aan te passen.

Kan ik een semitransparante of gekleurde schaduw toevoegen?

Ja. Typ een willekeurige CSS-kleur in het kleurveld — een volledige hex van 8 tekens zoals #00000040 (de laatste twee tekens zijn de alfa) geeft een semitransparante schaduw, en je kunt benoemde kleuren of elke hex gebruiken. Het staal van de kiezer verwerkt effen #rrggbb-kleuren; voor alfa bewerk je het tekstveld.

Hoe stapel ik meerdere schaduwen?

Klik op Laag toevoegen voor elke extra schaduw. De gegenereerde CSS scheidt elke laag met komma's in volgorde, van boven naar beneden — de eerste laag wordt als laatste (bovenop) getekend. Gebruik dit voor gelaagde diepte in Material-stijl of om een buitenste glow met een inset-highlight te combineren.

Wat doet het inset-selectievakje?

Inset tekent de schaduw binnen de rand van het element en creëert zo een ingedrukte of naar binnen gloeiende look in plaats van een buitenste slagschaduw. Vink het per laag aan; je kunt inset- en buitenschaduwen in dezelfde box-shadow-waarde combineren.

Worden mijn gegevens ergens geüpload?

Nee. De generator draait volledig in je browser met JavaScript — je kleuren en waarden worden nooit naar een server gestuurd, dus hij werkt privé en zelfs offline zodra de pagina is geladen.