CSS Schaduw Generator
Wat is het CSS Schaduw Generator
Met een CSS schaduw generator bouw je een box-shadow visueel op en kopieer je de exacte CSS. Stel de horizontale en verticale verschuiving, de vervagingsstraal, de spreiding en de schaduwkleur met de dekking in, en zie het voorbeeld veranderen terwijl je aan elke schuif trekt. Je kunt meerdere schaduwen op een element stapelen en elke laag op binnen zetten, zodat het uitvoervak altijd een plakklare box-shadow-declaratie toont.
Hoe te gebruiken
- Sleep de verschuivingschuiven om de schaduw horizontaal en verticaal te bewegen.
- Stel de vervagingsstraal in voor een zachte rand en de spreiding om de schaduw groter of kleiner te maken.
- Kies de schaduwkleur, pas de dekking aan en zet binnen aan voor een schaduw aan de binnenkant.
- Voeg meer lagen toe als je die nodig hebt en kopieer de gegenereerde CSS uit het uitvoervak.
Wanneer te gebruiken
Nodig aan een subtiele kaartschaduw die modern oogt in plaats van hard? Zet de verschuiving op 0px en 10px, 20px vervaging, geen spreiding en zwart op 25% dekking, en kopieer dan box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25); rechtstreeks in je stylesheet. Net zo handig voor hover-toestanden van knoppen, diepte in lagen of een schaduw aan de binnenkant die een invoerveld ingedrukt laat lijken.
Veelgestelde vragen
Wat betekenen de box-shadow-waarden?
In volgorde zijn het de horizontale verschuiving, de verticale verschuiving, de vervagingsstraal, de spreiding en de kleur. Positieve verschuivingen duwen de schaduw naar rechts en omlaag, vervaging verzacht de rand en spreiding maakt de hele schaduw groter of kleiner voordat die vervaagt.
Wat doet de spreidingswaarde?
Spreiding verandert de grootte van de schaduw voordat er vervaging wordt toegepast. Een positieve waarde maakt de schaduw groter dan het element en een negatieve trekt hem samen, wat handig is voor strakke schaduwen die maar aan een kant uitsteken.
Kan ik meer dan een schaduw stapelen?
Ja. Voeg zoveel lagen toe als je wilt en elke wordt een door komma's gescheiden schaduw binnen dezelfde box-shadow-regel. Een zachte brede schaduw onder een strakkere, dichtere stapelen is een gangbare manier om realistische diepte te krijgen.
Wat is een schaduw aan de binnenkant?
Een schaduw aan de binnenkant wordt binnen het element getekend in plaats van erachter, zodat het vak ingedrukt of verzonken lijkt. Zet binnen aan op een laag om die om te schakelen, wat goed werkt bij invoervelden en ingedrukte knoppen.
Kan ik deze tool delen met mijn ingevulde gegevens?
Ja. De URL wordt automatisch bijgewerkt terwijl je de schuiven aanpast. Kopieer de link uit de adresbalk of gebruik de Deel-knop, en iedereen die de link opent, ziet jouw exacte schaduw al klaar.
Gerelateerde tools
Beeldverhouding Berekenen
Bereken de beeldverhouding, vind de ontbrekende breedte of hoogte en schaal afbeeldingen en video zonder de verhoudingen te vervormen. Gratis.
Barcode Generator
Genereer EAN-13- of Code 128-barcodes online. Voer je nummer of tekst in en download als SVG of PNG. Gratis, geen aanmelding nodig.
Base64 Decoder
Decodeer Base64-strings direct naar platte tekst in je browser. Ondersteunt volledige Unicode-uitvoer inclusief emoji's. Gratis online Base64-decoder.