onul.works

Box-shadowgenerator

Maak CSS box-shadowwaarden met een live voorbeeld en kopieer de schaduwcode direct.

⌘ Draait in de browser ◴ Geen data opgeslagen ⌁ Gratis

Concept

CSS box-shadow voor kaarten, knoppen en modals

Pas met offset-x, offset-y, blur, spread, color en inset snel diepte en randen van componenten aan.

Met box-shadow kun je de diepte van de UI en de laagindeling snel afstellen via positie (offset), blur, spread, color en inset.

Deze tool genereert CSS-shadowwaarden en controleert meteen contrast en leesbaarheid op lichte en donkere achtergronden vóór je ze op echte kaarten, knoppen of modals zet.

Passende scenario’s

Gebruik je voor hover op kaarten, het benadrukken van knoppen, modal-overlays of toast-meldingen met lichte visuele hiërarchie.

Parametergids

x/y-offset bepaalt richting, blur de zachtheid, spread de reikwijdte, color de tint en inset de interne indruk.

Controle vóór inzet

Controleer achtergrondkleuren op de echte pagina, dark mode, leesbaarheid van knoptekst en aansluiting op design tokens (radius, spacing, schaduwtoon).

Output is bedoeld voor snelle preview en kopieerwerk; controleer in de echte UI nogmaals omdat rendering verschilt per achtergrond, modus en design token.

Gegenereerde box-shadow CSS

Hoe te gebruiken

  1. 1 Voeg een schaduwlaag toe en pas X/Y-offset, blur en spread aan.
  2. 2 Wijzig kleur en insetoptie terwijl u het voorbeeld controleert.
  3. 3 Kopieer de gegenereerde box-shadow CSS naar uw stylesheet.

Veelgebruikte toepassingen

  • Box-shadow CSS voor kaarten maken
  • Meerdere schaduwlagen afstellen
  • Inset-schaduwwaarde kopiëren

Veelgestelde vragen

Welke schaduwwaarden kan ik aanpassen?

U kunt X/Y-offset, blur, spread, kleur, dekking en inset aanpassen en meerdere schaduwlagen toevoegen of verwijderen.

Kan ik de gegenereerde box-shadow CSS direct gebruiken?

Ja. De voltooide box-shadow CSS staat onder het voorbeeld en de kopieerknop zet deze op het klembord.

Wordt het voorbeeld bijgewerkt als ik waarden wijzig?

Wanneer u sliders of kleurwaarden aanpast, worden voorbeeldvak en CSS-uitvoer direct bijgewerkt.

Gerelateerde workflow

Box-shadowgeneratorStel eerst de schaduwdiepte voor kaarten, knoppen of panelen in zodat de UI-hierarchie duidelijk blijft. → BarcodegeneratorAls een label of paneel een ID bevat, controleer dan het visuele gewicht naast de gekozen schaduw. → KleurkiezerStem achtergrond- en accentkleuren af zodat schaduwen natuurlijk ogen op kaarten en knoppen.