DevTulz Online

CSS Box Shadow Generator

Achtergrond

Wat is CSS Box Shadow?

De CSS box-shadow eigenschap voegt schaduweffecten toe rondom het kader van een element. Schaduwen kunnen worden verschoven, vervaagd, verspreid, gekleurd en worden ingesteld als inset (binnenste schaduw). Meerdere door komma's gescheiden schaduwen kunnen worden gestapeld voor rijke effecten. Met deze generator kunt u visueel complexe meerlaagse schaduwen bouwen en de plakklare CSS naar het klembord kopiëren.

Hoe de Box Shadow Generator te gebruiken

  1. Pas de schuifregelaars voor Offset X/Y, Blur en Spread aan om de schaduw te positioneren en vorm te geven.

  2. Klik op het kleurstaal om een schaduwkleur te kiezen en gebruik de Opacity-schuifregelaar voor transparantie.

  3. Schakel 'Inset' in om een binnenste gloed of een ingedrukt effect te maken.

  4. Klik op '+ Laag toevoegen' om meerdere schaduwen op elkaar te stapelen.

  5. Kopieer de gegenereerde CSS en plak deze in uw stijlblad.

Veelgestelde Vragen

Wat is het verschil tussen box-shadow en drop-shadow filter? box-shadow voegt schaduwen toe rond de rechthoekige grenskader van het element en ondersteunt inset-schaduwen. Het CSS-filter: drop-shadow() wordt toegepast op de visuele vorm van het element (inclusief transparantie), waardoor het niet-rechthoekige omtrekken zoals PNG's met transparante achtergronden volgt.

Hoe maak ik een Material Design-kaartheffingseffect? Stapel twee vakschaduwen: een zachte omgevingsschaduw (grote vervaging, lage dekking, lichte verspreiding) en een belangrijke schaduw (kleinere vervaging, hogere dekking, richtingsoffset). Bijvoorbeeld: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

Beïnvloedt box-shadow de pagina-indeling? Nee. box-shadow beïnvloedt niet de grootte of positie van het element in de documentstroom. In tegenstelling tot outline neemt het geen lay-oustruimte in beslag en zal het andere elementen niet verplaatsen.

Kan ik box-shadow animeren? Ja. box-shadow is animeerbaar met CSS-overgangen en -animaties. Voor prestaties geeft u er de voorkeur aan box-shadow alleen animeren wanneer nodig — browsers kunnen box-shadow-wijzigingen niet zo efficiënt GPU-accelereren als transform of opacity.

Keywords: CSS box shadow generator, box-shadow CSS, CSS schaduw tool, CSS drop shadow, binnenste schaduw, meerlaagse schaduw, CSS shadow online