CSS Box-Shadow Generator

Pas schaduwen visueel aan en kopieer de CSS-code direct

Pas de **horizontale** en **verticale offset**, **vervaging**, **spreiding**, **kleur** en **dekking** van de **box-shadow** intuïtief aan met schuifregelaars. Verfijn schaduwen in realtime met de preview en bereik eenvoudig complexe ontwerpen zoals **Neumorphism**. Kopieer de voltooide CSS-code met één klik.

Voorbeeld

Schaduw Eigenschappen

Horizontale Offset (X) 0px

Verticale Offset (Y) 4px

Vervaging (Blur) 12px

Spreiding (Spread) 0px

Kleur Dekking

Binnenste Schaduw (inset)

Voorinstellingen

Zacht

Gemiddeld

Hard

Neumorphism

Hoe te gebruiken

Het gebruik van de CSS **box-shadow** generator is eenvoudig:

Stap 1: Pas schaduw aan met schuifregelaars

Pas de parameters voor **horizontale offset**, **verticale offset**, **vervaging** en **spreiding** aan met schuifregelaars. Wijzigingen worden in realtime in de preview weergegeven.

Stap 2: Stel kleur en dekking in

Kies de **schaduwkleur** met de kleurenkiezer en verfijn de **dekking (0.0-1.0)** met numerieke invoer. Vink **inset** aan om een binnenste schaduw te creëren.

Stap 3: Kopieer de CSS-code

Pas aan terwijl u de preview controleert en kopieer vervolgens de voltooide CSS-code met één klik.

Deze tool draait volledig in uw browser. Alle verwerking vindt plaats op uw apparaat. Er worden geen gegevens extern verzonden.

Gebruiksscenario's

De CSS **box-shadow** generator kan in de volgende scenario's worden gebruikt:

1. Creëren van diepte voor kaart-stijl UI

Voeg zachte schaduwen toe aan blogpostkaarten of productkaarten om een gevoel van diepte te creëren dat lijkt te zweven van het scherm. Leidt de aandacht van de gebruiker en verbetert de klikfrequentie.

2. Knop hover effecten (Hover effects)

Versterk schaduwen bij het zweven over knoppen om visueel te communiceren dat op het element kan worden geklikt. Verbetert de bruikbaarheid direct.

3. Modale vensters scheiden van achtergrond

Pas donkere schaduwen toe op modale vensters om ze duidelijk te scheiden van de achtergrondinhoud. Concentreert de aandacht van de gebruiker op specifieke acties.

4. Neumorphism design

Bereik **Neumorphism** (Nieuw Skeuomorfisme) design door meerdere schaduwen te combineren. Bouw geavanceerde interfaces die de nieuwste UI-trends bevatten.

5. Focusaanduiding voor formulierinvoer

Pas binnenste schaduwen (**inset**) toe op invoerelementen bij focus om het momenteel actieve veld visueel te benadrukken. Verbetert de bruikbaarheid van het formulier.

6. Vaste koptekst header navigatiebalk

Voeg schaduwen toe aan kopteksten die vast blijven staan tijdens het scrollen om de grens tussen inhoud en koptekst te verduidelijken. Bereikt zowel leesbaarheid als ontwerpkwaliteit.

Wat is CSS box-shadow

**box-shadow** is een CSS-eigenschap die schaduwen toevoegt aan HTML-elementen. Het is een essentiële webdesigntechniek die diepte en dimensionaliteit kan uitdrukken met alleen CSS-code zonder afbeeldingen.

box-shadow parameters

**box-shadow** wordt gespecificeerd in de volgorde 'horizontale-offset verticale-offset vervaging spreiding kleur'. Horizontale en verticale offsets bepalen de positie van de schaduw, vervaging regelt de zachtheid van de rand, spreiding regelt de schaduwgrootte en de kleur kan worden gespecificeerd met **RGBA** inclusief transparantie.

inset (Binnenste schaduw)

Het toevoegen van het trefwoord **inset** tekent de schaduw binnen het element in plaats van buiten. Geschikt voor het uitdrukken van ingesprongen formulierinvoer of ingedrukte knopstatussen.

Lagen van meerdere schaduwen

Meerdere **box-shadows** kunnen worden gespecificeerd met kommaseparatie om schaduwen te lagen. **Neumorphism** design combineert lichte en donkere schaduwen om een driedimensionale textuur uit te drukken.

Veelgestelde Vragen

Is de CSS box-shadow generator gratis?

Ja, het is volledig **gratis** te gebruiken. Er is geen registratie vereist en het draait in uw browser, dus u kunt er direct mee aan de slag.

Wat is het verschil tussen vervaging (blur) en spreiding (spread)?

**Vervaging** bepaalt hoe zacht de schaduwrand is, terwijl **spreiding** bepaalt hoeveel de schaduwgrootte moet worden vergroot of verkleind. Met **0** vervaging en **10** spreiding krijg je een scherpe, grote schaduw.

Wat is Neumorphism?

**Neumorphism** is een ontwerptechniek die lichte en donkere schaduwen combineert om elementen te laten lijken alsof ze uitsteken of inspringen vanaf het scherm. Het creëert een moderne, verfijnde indruk.

Wanneer moet ik inset (binnenste schaduw) gebruiken?

Gebruik het bij het uitdrukken van ingesprongen elementen zoals invoervelden of ingedrukte knopstatussen. Combinatie met reguliere (buitenste) schaduwen maakt een meer driedimensionale uitdrukking mogelijk.

Wat is de impact van box-shadow op de prestaties?

**box-shadow** is een relatief lichte CSS-eigenschap, maar schaduwen met een grote vervaging of meerdere gelaagde schaduwen kunnen de renderbelasting verhogen. Extra voorzichtigheid is geboden voor smartphones.

Wordt het door alle browsers ondersteund?

**box-shadow** wordt ondersteund door alle belangrijke browsers, waaronder IE9+, **Chrome**, **Firefox**, **Safari** en **Edge**. Oudere browsers vereisen mogelijk leveranciersvoorvoegsels (-webkit-box-shadow).

Moet de schaduwkleur RGB of RGBA zijn?

**RGBA** wordt aanbevolen, omdat het aanpassing van de dekking mogelijk maakt. Over het algemeen creëert een schaduwdekking van **0.1-0.3** natuurlijke schaduwen die goed bij achtergronden passen.

Kan ik de gegenereerde CSS-code zo gebruiken als hij is?

Ja, de gegenereerde code kan onmiddellijk worden gebruikt door deze te kopiëren en in uw CSS-bestand te plakken. Het is geschreven als een **box-shadow**-eigenschap en is klaar om te worden toegepast.