Zo werkt het
- Stel Horizontale verschuiving en Verticale verschuiving in om de schaduw te verplaatsen.
- Pas Vervaging en Spreiding aan voor de zachtheid en grootte van de schaduw.
- Kies bij Kleur een schaduwkleur met de kleurenkiezer of voer een hexcode in.
- Stel Dekking in tussen 0 en 1 om de schaduw meer of minder doorzichtig te maken.
- Klik op + Laag toevoegen als je nog een schaduwlaag wilt instellen.
Voorbeelden
Gelaagde schaduw voor een productkaart
Invoer
Productkaart: twee zwarte schaduwlagen, een kleine dichtbij en een bredere eronder.
Uitvoer
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
Binnenschaduw voor een invoerveld
Invoer
Invoerveld voor een postcode: een subtiele binnenschaduw langs de bovenrand.
Uitvoer
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.15);
Tips
- Kies een schaduwkleur met de kleurenkiezer.
- Combineer met een verloopachtergrond uit de CSS Gradient Generator.
Veelgestelde vragen
Kan ik rem of halve pixels gebruiken voor box-shadow?
Deze generator gebruikt alleen hele pixels: −200 tot 200 voor de verschuiving en spreiding, en 0 tot 300 voor de vervaging. Waarden zoals 5.5 en eenheden zoals rem worden niet ondersteund.
Waarom staan de achtergrondkleur en afgeronde hoeken niet in de CSS?
Kleur van het vlak, Achtergrond en Hoekradius veranderen alleen het voorbeeld. De gegenereerde CSS bevat uitsluitend box-shadow.
Waarom verandert de schaduw niet na mijn invoer?
Bij een ongeldige waarde blijven de laatste geldige schaduw en CSS staan. Corrigeer het veld met de foutmelding om verder te gaan.
Blijven mijn schaduwinstellingen bewaard?
Je lagen en voorbeeldinstellingen worden opgeslagen in localStorage in je browser en bij een volgend bezoek hersteld. Met Resetten verwijder je die opgeslagen instellingen en keer je terug naar de standaardinstellingen.