In dit artikel
Wat is CSS box-shadow?
De CSS box-shadow eigenschap voegt schaduweffecten toe rond het kader van een element. Het is een van de meest gebruikte CSS-eigenschappen voor het creëren van diepte en visuele hiërarchie in webdesign. Een enkele box-shadow declaratie kan horizontale en verticale offsets, blur-radius, spread-radius en kleur bevatten.
Box-schaduwen kunnen gelaagd worden — u kunt meerdere schaduwen op een enkel element toepassen door ze met komma's te scheiden. Deze techniek maakt geavanceerde effecten mogelijk zoals realistische diepte, gloeiende randen en neumorfische ontwerpen. Het inset-sleutelwoord keert de schaduw om naar de binnenkant van het element voor ingedrukte of verzonken effecten.
Hoe onze generator werkt
De Box Shadow Generator van CheckTown biedt een visuele interface voor het maken van CSS box-schaduwen. Pas schuifregelaars aan, bekijk het resultaat in realtime en kopieer de CSS wanneer u tevreden bent met het effect.
- Pas X-offset, Y-offset, blur-radius en spread-radius aan met intuïtieve schuifregelaars
- Kies schaduwkleur met opaciteitsregeling, schakel inset-modus in en laag meerdere schaduwen
- Begin met presets zoals Subtiel, Medium, Groot of Gloed — pas dan aan om bij uw ontwerp te passen
Probeer gratis — geen aanmelding vereist
Maak een schaduw →Wanneer box-schaduwen gebruiken
Box-schaduwen zijn essentieel voor het creëren van diepte en visuele hiërarchie in moderne webinterfaces. Ze leiden het oog van de gebruiker en communiceren interactiviteit.
- Kaart- en paneelelevatie — subtiele schaduwen tillen kaarten van de achtergrond om een gelaagde interface te creëren
- Knoptoestanden — voeg schaduwen toe of verdiep ze bij hover om interactiviteit aan te geven en tactiele feedback te bieden
- Modale en dropdown-overlays — prominente schaduwen scheiden zwevende elementen van de onderliggende pagina
Veelgestelde vragen
Beïnvloedt box-shadow de lay-out of prestaties?
Box-schaduwen beïnvloeden de lay-out niet — ze zijn puur visueel en veranderen de grootte of positie van het element in de documentstroom niet. De prestaties zijn over het algemeen uitstekend in moderne browsers, maar zeer grote blur-radii of veel gelaagde schaduwen op vaak opnieuw getekende elementen kunnen de rendersnelheid beïnvloeden.
Kan ik box-shadow animeren?
Ja, box-shadow kan geanimeerd worden met CSS-transities en keyframes. Het animeren van box-shadow veroorzaakt echter repaints, wat kostbaar kan zijn. Voor betere prestaties kunt u overwegen de opaciteit op een pseudo-element met een vaste schaduw te animeren in plaats van de schaduwwaarden zelf te transitioneren.
Wat is het verschil tussen box-shadow en drop-shadow?
box-shadow past een rechthoekige schaduw toe op de box van het element (inclusief border-radius). filter: drop-shadow() past een schaduw toe die de werkelijke vorm van het element volgt, inclusief transparante gebieden in afbeeldingen. Gebruik box-shadow voor UI-elementen en drop-shadow voor afbeeldingen met transparantie.