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.
Hoe CSS Box Shadow Generator te gebruiken
Ontwerp CSS box-shadows visueel in plaats van waarden te gokken. De generator draait lokaal in je browser en niets van wat je invoert wordt geüpload.
- Stel H-Offset en V-Offset in om de schaduw horizontaal en verticaal te verplaatsen.
- Verhoog Blur voor zachtere randen en gebruik Spread om de schaduw te vergroten of verkleinen.
- Kies een Color en pas de Opacity aan voor een zachter, natuurlijker effect.
- Vink Inset aan om de schaduw binnen het element in plaats van eromheen te tekenen.
- Kopieer de voltooide box-shadow-regel uit de voorbeeldweergave naar je stylesheet.
Een kleine blur met een licht positieve V-Offset geeft net onder het element een subtiele, realistische contactschaduw.
Gerelateerde tools
- CSS Border Radius Generator Visuele CSS border-radius generator. Pas elke hoek onafhankelijk aan met realtime voorbeeld en kopieer de CSS-code direct.
- CSS-gradiëntgenerator Maak visueel verbluffende CSS-gradiënten. Genereer lineaire, radiale en conische gradiënten met meerdere kleurstops, hoeken en posities. Kopieer direct productierijpe CSS-code.
- CSS Grid Generator Gratis visuele CSS Grid-generator met live preview. Ontwerp interactief responsieve grid-lay-outs en exporteer direct productieklare CSS-code.
- CSS Flexbox Generator Visuele CSS Flexbox-generator met live preview. Pas flex-eigenschappen aan en krijg direct bruikbare CSS-code.
- Border Radius Generator Gratis online border-radius generator. Sleep 8 handvatten of kies een blob-voorinstelling om organische CSS-vormen te maken en de code direct te kopiëren.
- Kleurconverteerder Gratis online kleurconverteerder. Converteer HEX, RGB, HSL, HSV formaten direct met visuele kiezer. 100% privé, werkt in uw browser.
- CSS Easing Generator Gratis online CSS easing generator. Sleep de cubic-bezier-controlepunten op een interactieve curve, kies uit 18 presets, bekijk een herhalende bal-animatie en kopieer de timingfunctie direct.
- CSS Text-shadow Generator Gratis online text-shadow generator. Stapel meerdere schaduwlagen met offset, vervaging, kleur en dekking, probeer presets als Neon, 3D of Retro en kopieer de CSS direct.