CSS box-shadow generator

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.