CSS Box Shadow Generator
Gratis online CSS box-shadow generator. Maak visueel prachtige schaduwen met instelbare offset, blur, spread, kleur en inset. Live voorbeeld en directe code kopiëren.
Wat is CSS box-shadow?
CSS box-shadow is een CSS-eigenschap die schaduweffecten toevoegt rond het kader van een element. Hiermee kunt u drop shadows, inner shadows en meerdere schaduw lagen maken door offset, blur radius, spread radius en kleurwaarden op te geven.
Wat zijn de parameters van box-shadow?
De box-shadow eigenschap accepteert verschillende waarden: horizontale offset (X), verticale offset (Y), blur radius, spread radius, kleur en het optionele inset sleutelwoord. U kunt ook meerdere schaduwen opgeven gescheiden door komma's.
Wat is het inset-sleutelwoord?
Het inset-sleutelwoord verandert de schaduw van een externe schaduw (drop shadow) naar een interne schaduw. Wanneer inset is opgegeven, wordt de schaduw binnen de rand van het element getekend in plaats van buiten, wat een inset-effect creëert.
Wat is de blur-radius?
De blur-radius bepaalt hoeveel de rand van de schaduw vervaagd is. Een waarde van 0 creëert een scherpe, stevige rand. Grotere waarden creëren een meer verspreide, zachtere schaduw die verder van het element reikt.
Wat is de spread-radius?
De spread-radius vergroot of verkleint de schaduwgrootte. Positieve waarden maken de schaduw groter dan het element, terwijl negatieve waarden het kleiner maken. Dit beïnvloedt de schaduw voordat de blur wordt toegepast.
Hoe maak ik meerdere schaduwen?
U kunt meerdere schaduwen maken door elke schaduwdefinitie te scheiden met een komma. Elke schaduw kan verschillende offset-, blur-, spread- en kleurwaarden hebben. Schaduwen worden toegepast in de volgorde waarin ze worden gedeclareerd, met de eerste schaduw bovenop.
Kan ik RGBA-kleuren gebruiken voor schaduwen?
Ja, u kunt elk CSS-kleurformaat gebruiken, waaronder RGBA, HSLA, HEX of benoemde kleuren. RGBA en HSLA zijn bijzonder nuttig voor het maken van半-transparante schaduwen die natuurlijk mengen met achtergronden.
Hoe kopieer ik de gegenereerde CSS-code?
Klik gewoon op de knop "Code kopiëren" in de generator-interface. De CSS-code wordt naar uw klembord gekopieerd en kan rechtstreeks in uw stylesheet of HTML-bestand worden geplakt.
Wordt box-shadow ondersteund in alle browsers?
Ja, box-shadow wordt ondersteund in alle moderne browsers, waaronder Chrome, Firefox, Safari, Edge en Opera. Het is sinds 2011 onderdeel van CSS3 en heeft uitstekende browsercompatibiliteit.
Beïnvloedt box-shadow de prestaties?
box-shadow heeft minimale invloed op de prestaties van moderne browsers. Het gebruik van meerdere complexe schaduwen met een grote blur-radius op veel elementen kan echter de renderingprestaties beïnvloeden, vooral op mobiele apparaten.
Wat zijn veelvoorkomende gebruikscases voor box-shadow?
Veelvoorkomende toepassingen zijn het creëren van kaartverhogingseffecten, het toevoegen van diepte aan knoppen, het maken van inset-formuliervelden, het implementeren van material design-schaduwen en het toevoegen van visuele scheiding tussen overlappende elementen.
Kan ik box-shadow animeren?
Ja, box-shadow kan worden geanimeerd met CSS-transities of animaties. Het animeren van box-shadow kan echter prestatie-intensief zijn. Overweeg voor betere prestaties het gebruik van pseudo-elementen met opaciteitsovergangen.