Hoe maak ik een CSS box-shadow en kopieer ik de code?

Stel de schuifregelaars in voor x- en y-offset, blur, spread, Kleur en dekking en bekijk het live voorbeeld. Druk daarna op Kopiëren in de CSS-uitvoer. Je kunt ook starten vanuit Voorinstellingen zoals Zacht, Gloed of Material 8.

Kan ik meerdere schaduwen op één element stapelen?

Ja. Druk op + Nog een schaduwlaag toevoegen om meer lagen toe te voegen, herorden ze, Verbergen of Verwijderen per laag. De lagen worden met komma's samengevoegd in één box-shadow-waarde.

Hoe maak ik een inwendige schaduw?

Selecteer een laag en zet Inwendige schaduw aan, of laad de Inwendig-voorinstelling. De uitvoer bevat dan het sleutelwoord inset voor die laag.

Kan ik een Tailwind-klasse krijgen in plaats van gewone CSS?

Ja. Naast de CSS-declaratie geeft de tool een Tailwind arbitrary-value-klasse in de vorm shadow-[...], waarbij spaties zijn vervangen door underscores, klaar om in je markup te plakken.

Is er een makkelijkere manier om de schaduwpositie in te stellen dan met de schuifregelaars?

Ja. Sleep het voorbeeldvak om de schaduw van de actieve laag te verplaatsen en houd Shift ingedrukt voor fijne controle. Je kunt ook de Voorbeeldachtergrond en Vakkleur aanpassen om te zien hoe de schaduw op je ontwerp staat.

Ja. Elke tool is gratis te gebruiken, zonder account en zonder creditcard. Het werk gebeurt op jouw apparaat in plaats van op onze servers, en daarom is het gratis te gebruiken.

Ja. Het werkt in actuele mobiele browsers op iOS en Android, zonder iets te installeren.

🎨

Gratis CSS box-shadow-generator

Visuele bouwer voor CSS box-shadow met livevoorvertoning, meerdere lagen, kleurkiezer, inset-schakelaar en kopiëren met één klik. Inclusief presets voor Material, neumorfisme en gloei.

Draait in je browserGeen aanmelding, geen pop-upsGeen aanmelding vereistVoor altijd gratis

Werkt offline na het laden

Voorbeeldachtergrond

Sleep de doos om de schaduw van de actieve laag te positioneren - houd Shift ingedrukt voor fijne controle

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Voorinstellingen

Vakkleur

Hoekradius (16px)

x (0px)

y (4px)

vervaging (12px)

spreiding (0px)

Kleur

Dekking (15%)

Inwendige schaduw

Veelvoorkomend gebruik

Card UI SchaduwenBouw elegante kaartschaduwen voor dashboards, productgrids en dashboards.
Knop Druk EffectenBouw knopschaduwen die echte wereld diepte en persstatussen nabootsen.
Neumorphism Soft UICreëer het soft-UI neumorphism look met gekoppelde lichte + donkere schaduwen.
Modal & Popover SchaduwenCreëer het verheven, zwevende gevoel voor dialogen en dropdown menu's.
Gloei- en Focus Ring-effectenCreëer gloeiende accenteffecten, focus rings en neon-achtige highlights.

Hoe het werkt

De box-shadow-generator is een volledig client-side React-tool — geen server, geen bibliotheek. Hij houdt een lijst met schaduwlagen bij in de state, stelt bij elke wijziging geldige CSS box-shadow-tekenreeksen samen met een zelfgeschreven rgba()-formatter en past die direct toe op een voorbeeldelement via de style-prop van React, zodat de eigen rendering-engine van de browser het resultaat meteen tekent.

1
Laagparameters voeden de formatter
Elke schaduwlaag bewaart x/y-verschuivingen, vervaging, spreiding, een hexkleur en een dekkingswaarde. Bij elke wijziging zet een kleine shadowToCss-functie de hexkleur met een regex om naar RGB-componenten en stelt de rgba()-tekenreeks samen — bijvoorbeeld 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Meerdere lagen worden met komma's samengevoegd.
2
De browser toont het live voorbeeld
De samengestelde tekenreeks wordt direct in JSX aan de boxShadow-stijleigenschap van een div-element toegekend. React werkt het DOM-attribuut bij en de CSS-engine van de browser tekent de schaduw meteen — er komt geen canvas of WebGL aan te pas, alleen native CSS-rendering.
3
Slepen om te positioneren gebruikt de Pointer Events API
Klikken en slepen in het voorbeeldvak roept setPointerCapture aan op het element en volgt daarna de onPointerMove-verschuivingen om de x- en y-verschuiving van de actieve laag in realtime bij te werken. Met Shift ingedrukt geldt een schaalfactor van 0,25x voor fijnere positionering.
4
De uitvoer wordt naar het klembord gekopieerd
De tool maakt uit dezelfde laaggegevens twee uitvoerformaten: een standaard CSS box-shadow-declaratie en een Tailwind-klasse met willekeurige waarde (shadow-[...]) waarin spaties volgens de syntaxisregels van Tailwind door underscores worden vervangen. Kopiëren met één klik gebruikt navigator.clipboard.writeText.