CSS box-shadow generator
Pas offset, blur, spreiding, kleur en dekking aan met schuifregelaars en een kleurkiezer om een CSS box-shadow te ontwerpen, bekijk hem live toegepast op een voorbeeldvak, en kopieer de gegenereerde box-shadow-declaratie direct naar je stylesheet.
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.35);Hoe het werkt
Offset-X en offset-Y verplaatsen de schaduw horizontaal en verticaal, de blur-straal verzacht de rand, en de spreidingsstraal maakt de schaduw groter of kleiner voordat de blur wordt toegepast. Kies een kleur en dekking voor de schaduw, en schakel „inset" in om de schaduw binnen in plaats van buiten de rand van het vak te tekenen.
Tip
Subtiele schaduwen zien er meestal het beste uit: een kleine offset, een blur-straal die ongeveer twee tot drie keer zo groot is als de offset, en een dekking ruim onder 50% ogen als een zachte, natuurlijke verhoging in plaats van een zware omtrek.
Kan ik meerdere schaduwen stapelen?
Ja — CSS box-shadow accepteert een door komma’s gescheiden lijst van schaduwen, van boven naar beneden gestapeld. Deze tool genereert steeds één schaduw tegelijk; combineer meerdere gegenereerde declaraties (gescheiden door komma’s) om gelaagde, realistischere schaduwen te maken.
Meer tools in deze categorie
Regex-tester
Test reguliere expressies op een voorbeeldtekst met live markering van treffers.
Cron-expressie-parser
Ontleed een cron-expressie met 5 velden tot een leesbare planning en bekijk de volgende uitvoeringstijden.
Tekstcodering-converter
Zet tekst tegelijk om naar UTF-8-hex, binair, code points, Base64, URL-codering en HTML-entiteiten.
Wachtwoordgenerator
Genereer direct sterke, willekeurige wachtwoorden, rechtstreeks in je browser.
JSON-opmaker & validator
Formatteer, valideer en minify JSON direct in je browser.
UUID-generator
Genereer willekeurige UUID's versie 4 (RFC 4122) direct in je browser.
JWT-decoder
Decodeer en inspecteer JSON Web Tokens (JWT's) direct in je browser.
Diff-checker
Vergelijk twee tekstblokken en zie direct elke toegevoegde of verwijderde regel.
Slug-generator
Zet elke tekst in real time om naar een nette, URL-vriendelijke slug.
Talstelsel-omzetter
Reken direct getallen om tussen binair, octaal, decimaal en hexadecimaal.
Unix-timestamp-omzetter
Zet live Unix-timestamps om naar datums en datums naar Unix-timestamps.
Hash-generator
Genereer SHA-1-, SHA-256- en SHA-512-hashes van willekeurige tekst, rechtstreeks in je browser.
Cron-expressie-generator
Stel een geldige 5-velden cron-expressie samen met een eenvoudig formulier — zonder de syntaxis te hoeven onthouden.
Lorem Ipsum Generator
Genereer Lorem Ipsum-vultekst in alinea's, zinnen of woorden voor mockups en lay-outs.
Markdown-voorbeeld
Schrijf links Markdown en zie rechts direct de gerenderde HTML.
IP-subnetcalculator
Voer een IPv4-adres in CIDR-notatie in en krijg het netwerk, masker, broadcast en hostbereik.
HTTP-statuscode opzoeken
Zoek elke HTTP-statuscode op en bekijk de standaardbetekenis in gewone taal.
SQL-opmaker
Zet geminificeerde of rommelige SQL om in leesbare, ingesprongen instructies.
Afbeelding-naar-Base64-converter
Zet een afbeelding om in een Base64-data-URI die je direct in HTML, CSS of JSON kunt plakken — volledig in je browser.
Semver-vergelijker
Vergelijk twee semantische versienummers en zie welke voorrang heeft, volgens de officiële semver-regels.