Go Toolstack

CSS Box Shadow en verhoging generator

Ontwerp prachtige gelaagde CSS-schaduwen met visuele controls voor x/y-verschuiving, vervaging, spreiding, kleur en inset.

CSS Box Shadow en verhoging generator

Ontwerp prachtige gelaagde CSS-schaduwen met visuele controls voor x/y-verschuiving, vervaging, spreiding, kleur en inset.

Hoe het werkt

1
Set Criteria & Options
Select length, format, or generation parameters for your output.
2
Generate Instantly
Generate secure, random, or custom data entirely in your browser.
3
Copy or Export
Copy the generated output to your clipboard or download the file.

Ontdek meer gratis browsergebaseerde tools

Hub Afbeeldingen & Design • Workflows en vergelijkingsgids

Ontdek alle afbeeldingen & design tools, browserlimieten en de selectiegids.

Hub verkennen →
JSON-formatteerder en validator

Formatteer, minificeer en valideer JSON-gegevens met verliesvrije 64-bits BigInt-precisie en JSON Schema-regels (Draft-07 / 2020-12).
Base64-encoder en decoder

Codeer platte tekst direct naar Base64 of decodeer Base64-reeksen naar UTF-8 met ondersteuning voor URL-veilige varianten.
SQL-query formatteerder

Structureer en formatteer complexe SQL-query's met nette inspringing voor MySQL, PostgreSQL, SQLite, MS SQL en Oracle.

Gerelateerde bloghandleidingen

Technische gidsen, probleemoplossing en handleidingen voor best practices

Kennisbank & Handleiding

CSS-box-shadow generator: Visuele schaduwen ontwerpen en CSS kopiëren

Een zorgvuldig afgestelde schaduw geeft diepte en een moderne uitstraling aan kaarten, knoppen en dialoogvensters in webdesign. De CSS-box-shadow generator in GoToolstack biedt een interactieve visualisatie waarmee je schaduwen met intuïtieve schuifregelaars ontwerpt.

Pas de horizontale (X) en verticale (Y) verschuiving, de vervagingsstraal (blur radius), de spreiding (spread) en de kleur met transparantie aan. De tool ondersteunt tevens meerlaagse schaduwen voor een natuurlijk lichteffect.

Kernarchitectuur & Wiskundige formule

box-shadow: [inset] [offset-x] [offset-y] [blur-radius] [spread-radius] [color]

Realtime generatie van gestandaardiseerde CSS-schaduwdeclaraties volgens de W3C CSS Backgrounds and Borders specificatie.

Tips en best practices

  • Gebruik meerdere subtiele schaduwlagen voor een natuurlijk effect: Combineer een scherpe, donkere schaduw met een zachte, brede lichte schaduw voor realistische diepte.
  • Kies transparante RGBA- of HSLA-kleuren: Schaduwen met 10% tot 25% dekking ogen veel eleganter dan harde zwarte schaduwen.
  • Zorg voor een consistent lichtpunt: Laat alle schaduwen op een pagina vanuit dezelfde virtuele hoek (bijv. linksboven) vallen.

Häufig Gestellte Fragen (FAQ)

Wat is het verschil tussen blur-radius en spread-radius?
Blur radius bepaalt hoe zacht en uitgevloeid de rand van de schaduw is. Spread radius bepaalt of de schaduw groter (positief) of kleiner (negatief) is dan het element zelf.
Hoe maak ik een binnenwaartse schaduw?
Schakel de optie 'Inset' in; hierdoor wordt de schaduw aan de binnenkant van het element getekend, wat een ingedrukt effect creëert.