box-shadow:
    0px 4px 6px -1px rgba(0, 0, 0, 0.1);

Gratis Online CSS Box Shadow Generator — Visuele Schaduw Bouwer

Ontwerp prachtige CSS box schaduwen visueel met een livevoorbeeld. Deze gratis box shadow generator ondersteunt meerdere lagen, voorinstellingen, ingebouwde schaduwen en genereert direct bruikbare CSS-code.

Wat Is Een Box Shadow Generator?

Een box shadow generator is een visueel hulpmiddel dat webontwerpers en -ontwikkelaars helpt om CSS box-shadow waarden te creëren zonder handmatig pixelwaarden te schrijven. In plaats van te raden en de browser te vernieuwen, aanpassen van sliders en zie het resultaat direct in actie.

De CSS box-shadow eigenschap voegt schaduw-effecten toe rondom het kader van een element. Het is een van de meest gebruikte CSS-eigenschappen voor het creëren van diepte, verhoging en visuele hiërarchie in moderne webinterfaces.

Hoe Gebruik Je Deze Box Shadow Generator

1. Kies een voorinstelling — Start met een subtiel, gemiddeld of krachtig schaduw-effect, of begin vanaf nul.
2. Aanpassen van sliders — Beheer de verschuiving X, verschuiving Y, verwarring, uitbreiding, kleur en doorzichtigheid.
3. Aan/uit schakelen voor ingebouwde schaduw — Wissel tussen een buitenste en binnenste schaduw.
4. Lagen toevoegen — Stap meerdere schaduwen op voor complexe effecten.
5. Voorbeeld aanpassen — Verander de achtergrond- en dooskleuren om overeen te komen met je ontwerp.
6. Kopieer de CSS — Klik op de kopieerknop en plak de code in je stylesheet.

Belangrijke Kenmerken

Kenmerk	Voordelen
Livevoorbeeld	Zie veranderingen direct terwijl je sliders aanpast
6 voorinstellingen	Start snel met veelgebruikte schaduwstijlen
Meerdere lagen	Stap schaduwen op voor complexe, realistische effecten
Ingebouwde ondersteuning	Creëer binnenste schaduwen voor ingesunkene elementen
Kleurkiezer	Volledige controle over schaduwkleur
Doorzichtigheidbeheer	Fijnafwijkend beheer van schaduwdoorzichtigheid
Kopieer naar klembord	Een-klik CSS-export

Begrijpen van CSS Box Shadow

De Syntax

De box-shadow CSS-eigenschap volgt deze syntax:

box-shadow: [inset] offsetX offsetY blur spread color;

Waarde	Beschrijving	Voorbeeld
inset	(Optioneel) Maakt de schaduw binnenkant	inset
offsetX	Horizontale verschuiving — positief = rechts, negatief = links	4px
offsetY	Verticale verschuiving — positief = beneden, negatief = boven	4px
blur	Verwarring radius — hoger = zachtere schaduw	12px
spread	Uitbreidingsgrootte — positief = groter, negatief = kleiner	0px
color	Schaduwkleur met alfade doorzichtigheid	rgba(0,0,0,0.1)

Meerdere Schaduwen

Je kunt meerdere schaduwen stapelen door ze met komma's te scheiden:

box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 10px 20px rgba(0, 0, 0, 0.05);

Dit creëert een tweelagen schaduw: een strakke, donkere schaduw dicht bij het element, en een zachtere, lichtere schaduw die verder uitreikt — wat een realistischer diep effect oplevert.

Schaduwstijlvergelijking

Stijl	CSS	Gebruikscasus
Subtiel	0 1px 3px rgba(0,0,0,0.08)	Kaarten, lijstitems
Gemiddeld	0 4px 6px rgba(0,0,0,0.1)	Knoppen, modals
Krachtig	0 10px 15px rgba(0,0,0,0.15)	Dialogen, popovers
Glow	0 0 20px rgba(59,130,246,0.4)	Focusstates, CTA's
Ingebouwd	inset 0 2px 4px rgba(0,0,0,0.1)	Invoervelden, wells
Hard	4px 4px 0 rgba(0,0,0,0.25)	Retro/brutalistische UI

Real-World Gebruikscasussen

Material Design Verhoging

Material Design gebruikt schaduwen om verhogingsniveaus aan te duiden. Een level-1 kaart gebruikt 0 1px 3px rgba(0,0,0,0.12), terwijl een level-2 dialoog 0 2px 4px rgba(0,0,0,0.16) gebruikt.

Hover Effect

:hover {
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

Neumorphism

.neumorphic {
  box-shadow: 10px 10px 20px #ccc, -10px -10px 20px #333;
}

Tips Voor Betere Schaduwen

Tip	Uitleg
Houd verwarring subtiel	Vermijd oververwarring, behoud de schaduw realistisch
Gebruik meerdere lagen	Creëer diepte door meerdere schaduwlagen te gebruiken
Kies passende kleuren	Zorg dat schaduwkleuren overeenkomen met het ontwerp
Pas doorzichtigheid aan	Gebruik doorzichtigheid voor subtiele effecten
Test op verschillende schermen	Zorg dat schaduwen goed werken op mobielen, tablets en desktops

Vaak Gestelde Vragen

Wat is het verschil tussen box-shadow en drop-shadow?

box-shadow is een CSS eigenschap die schaduw-effecten toevoegt aan elementen, terwijl drop-shadow een specifiek effect is dat meestal wordt gebruikt voor tekst en iconen in SVG. Beide kunnen worden gebruikt voor verschillende visuele doeleinden.

Hoe kan ik schaduwen aanpassen op mobiele apparaten?

Gebruik media queries om schaduw-effecten aan te passen op verschillende schermgrootte. Bijvoorbeeld:

@media (max-width: 768px) {
  .box {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
}

Kan ik schaduwen gebruiken in SVG?

Ja, drop-shadow kan worden gebruikt in SVG voor het toevoegen van schaduw-effecten aan tekst en iconen. Het is echter anders dan box-shadow in CSS.

Hoe kan ik schaduwen gebruiken in React?

Gebruik de box-shadow eigenschap in CSS-in-JS libraries zoals styled-components of emotion:

const Box = styled.div`
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
`;

Wat is de beste manier om schaduwen te gebruiken in een responsive design?

Gebruik media queries om de schaduw-intensiteit aan te passen op verschillende schermgrootte. Vermijd oververwarring op kleiner scherm en gebruik subtiele schaduwen voor betere visuele balans.