Handytool
OntwikkelaarGratisLokaal uitvoeren

CSS box-shadow generator

Ontwerp CSS box-shadow waarden met live preview — offsets, blur, spread, opacity en inset.

Voorbeeld
CSS
box-shadow: 0px 8px 24px -4px rgba(10, 10, 10, 0.18);

Pas de schuifregelaars aan om de schaduw te ontwerpen – kopieer het CSS wanneer het er goed uitziet.

Over CSS box-shadow generator

Handytool's box-shadow generator geeft je schuiven voor offset, blur, spread, kleur en opacity — en een live preview-kaart die bijwerkt terwijl je sleept. Zet inset-schaduwen aan of uit, zet een kleur in via de picker en kopieer de resulterende box-shadow CSS-declaratie rechtstreeks in je stylesheet. De hele tool draait in je browser; niets is geüpload.

Functies van CSS box-shadow generator

  • 01

    Elke parameter als een schuif

    Horizontale en verticale offsets, blur radius, spread radius en opacity hebben elk hun eigen schuif plus een numerieke invoer — fine-tune door te slepen, voer dan aan voor pixelprecisie.

  • 02

    Inset-schaduwen ondersteund

    Zet de inset-toggle aan om van een drop shadow naar een inner shadow te schakelen — handig voor ingedrukte knoppen, ingezonken invoeren en neumorphic oppervlakken.

  • 03

    Kleur + opacity, afzonderlijk

    Kies de basiskleur in welke hex-waarde dan ook, pas opacity onafhankelijk aan. De uitvoer gebruikt rgba() zodat de kleur en alpha leesbaar blijven wanneer je de CSS kopieert.

Veelgestelde vragen over CSS box-shadow generator

Wat doet de spread-waarde?
Positieve spread vergroeit de schaduw in alle richtingen voordat de blur wordt toegepast; negatieve spread krimpt deze. Het is nuttig voor strakke, gedefinieerde glows wanneer gepaird met een kleine blur.
Kan ik meerdere schaduwen toevoegen?
Deze generator voert een enkele schaduw-declaratie uit. Om schaduwen in lagen in te delen, kopieer je de waarde en plak je deze twee keer in je CSS gescheiden door een komma — box-shadow accepteert een komma-gescheiden lijst.
Waarom is mijn inset-schaduw onzichtbaar?
Inset-schaduwen tekenen binnen het element, dus ze hebben een achtergrondkleur of opvulling nodig om zichtbaar te zijn. Ze worden ook niet weergegeven op transparante of nul-grote elementen.
Is het preview pixel-nauwkeurig?
Ja — het preview gebruikt de werkelijke CSS box-shadow eigenschap op een echt element, dus wat je ziet is exact wat je stylesheet zal renderen.

Gerelateerde tools

Ontwikkelaar →

Ontdek meer tools

Alle tools →