NL

CSS box-shadow generator

Kies een kant-en-klare stijl of stel verschuiving, vervaging, spreiding, kleur en dekking in met de schuifregelaars. Je kunt meerdere schaduwen stapelen en elke schaduw omzetten in een binnenschaduw (inset). De preview wordt meteen bijgewerkt en de kant-en-klare CSS kopieer je met één klik. Hieronder kun je ook je eigen CSS plakken en verder bewerken.

Schaduw aanpassen

Kant-en-klare stijlen

box-shadow:
  0 10px 25px -5px rgba(0, 0, 0, 0.25),
  0 8px 10px -6px rgba(0, 0, 0, 0.1);
Eén schaduw per regel, gescheiden door komma’s – bijv. 0 4px 12px rgba(0, 0, 0, 0.12)
Je invoer wordt alleen in deze browser opgeslagen.

Resultaat

CSS-declaratie
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
Schaduwlagen (de eerste ligt bovenop)
Nr.Verschuiving X (px)Verschuiving Y (px)Vervaging (px)Spreiding (px)KleurType
10 px10 px25 px-5 pxrgba(0, 0, 0, 0.25)buiten
20 px8 px10 px-6 pxrgba(0, 0, 0, 0.1)buiten
Hoever de schaduw buiten het vak reikt (ca.)
boven 10 px · rechts 20 px · onder 30 px · links 20 px

Zo wordt het berekend

Hoe box-shadow werkt

Volgens de W3C-specificatie (CSS Backgrounds and Borders Level 3) bestaat een schaduw uit twee tot vier lengtes, een optionele kleur en het optionele trefwoord inset:

WaardeBetekenis
1e lengteHorizontale verschuiving naar rechts (negatief: naar links)
2e lengteVerticale verschuiving naar beneden (negatief: naar boven)
3e lengteVervagingsstraal, nooit negatief; 0 indien weggelaten
4e lengteSpreiding: vergroot de schaduw, een negatieve waarde verkleint hem
Kleurindien weggelaten wordt de tekstkleur gebruikt (currentColor)
insettekent de schaduw binnen het vak in plaats van erbuiten

Scheid meerdere schaduwen met komma’s. De eerste schaduw wordt bovenop getekend, de overige erachter. Schaduwen hebben geen invloed op de lay-out en veroorzaken geen scrollbalken – maar een ouderelement met overflow: hidden snijdt ze af.

Hoe ver reikt de vervaging?

De specificatie vereist een vervaging die een Gaussiaanse vervaging benadert met een standaardafwijking van de helft van de vervagingsstraal. De overgang is daardoor ongeveer twee keer zo breed als de vervagingswaarde en gecentreerd op de rand van de schaduw – naar buiten toe reikt hij dus ongeveer één vervagingsstraal.

Voorbeeld 0 10px 25px -5px: de rand ligt 25 − 5 = 20 px buiten het vak, 10 px naar beneden verschoven. De schaduw reikt dus ongeveer 20 − 10 = 10 px naar boven, 20 px aan weerszijden en 20 + 10 = 30 px naar onderen. De generator toont deze waarden onder “Hoever de schaduw reikt” – handig als padding zodat niets wordt afgesneden.

Gangbaar gebruik

Veelgestelde vragen

Wat is het verschil tussen blur en spread?

Vervaging (3e waarde) verzacht de rand zonder het basisoppervlak van de schaduw te veranderen. Spreiding (4e waarde) vergroot of verkleint het oppervlak van de schaduw zelf voordat die vervaagd wordt. Een vervaging van 0 met een positieve spreiding geeft een harde contour.

Hoe stapel ik meerdere schaduwen?

Scheid ze met komma’s, bijv. 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24). De eerste schaduw wordt bovenop getekend. Voeg er in de generator meer toe met “+ Schaduw”.

Waarom wordt mijn schaduw afgesneden?

Schaduwen tellen niet mee voor de afmeting van een element. Heeft een ouderelement overflow: hidden of overflow: auto, dan wordt alles wat eruit steekt afgesneden. Geef het ouderelement minstens de padding die de generator toont onder de reikwijdte van de schaduw.

Werkt box-shadow in elke browser?

Ja. box-shadow, inclusief meerdere schaduwen, inset en rgba()-kleuren, wordt zonder prefix ondersteund door alle huidige browsers. De generator schrijft transparante kleuren als rgba(), wat ook oudere browsers begrijpen.

Bronnen en wettelijke basis

Bijgewerkt op:

Vergelijkbare tools