--- title: "Hoe voeg je schaduwen toe aan een afbeelding in Markdown" slug: "how-to-add-shadows-to-an-image-in-markdown" description: "Markdown doesn't have a built-in way to add shadows to images, but you can use HTML tags within Markdown to achieve this effect." tags: ["Customization", "Editor"] updated: 2026-06-22T09:03:37Z published: 2026-06-22T09:03:37Z canonical: "docs.document360.com/how-to-add-shadows-to-an-image-in-markdown" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # Hoe voeg je schaduwen toe aan een afbeelding in Markdown De Markdown-editor heeft geen ingebouwde manier om schaduwen aan afbeeldingen toe te voegen. De oplossing is om de HTML-tag `<img>` te gebruiken met de `box-shadow` CSS-eigenschap binnen het `style` attribuut, die door de Markdown-editor van Document360 correct wordt weergegeven. --- ## Wanneer je beeldschaduwen moet gebruiken - **Uitgelichte afbeeldingen of heldenbeelden** — een subtiele schaduw tilt de afbeelding van de pagina en geeft het visuele gewicht, waardoor het minder plat aanvoelt tegen een witte achtergrond. - **Screenshots met witte of lichte achtergronden** — zonder schaduw kan een screenshot met een lichte achtergrond in de pagina overgaan. Een schaduw creëert een zichtbare grens. - **Decoratieve of productafbeeldingen** — schaduwen geven diepte en afwerking aan beelden die voor visuele interesse worden gebruikt in plaats van voor technische instructie. Gebruik schaduwen spaarzaam. Het toepassen ervan op elke afbeelding in een artikel creëert visuele ruis in plaats van nadruk. OPMERKING Deze techniek werkt alleen in de **Markdown-editor**. Gebruik in de WYSIWYG-editor in plaats daarvan de schaduwschakelaar in het beeldinstellingenpaneel. --- ## Inzicht in de box-shadow eigenschap De `box-shadow` CSS-eigenschap neemt drie waarden aan in deze volgorde: | Waarde | Wat het controleert | Voorbeeld | | --- | --- | --- | | Horizontale offset | Hoe ver de schaduw naar links (negatief) of rechts (positief) reikt? | `3px` | | Verticale offset | Hoe ver de schaduw omhoog reikt (negatief) of omlaag (positief) | `3px` | | Vervagingsstraal | Hoe scherp of zacht de schaduwrand eruitziet (hoger = zachter) | `3px` | | Kleur | De schaduwkleur — elke CSS-kleurnaam of hex-code | `gray` | --- ## Snelle referentie Vervang `YOUR_IMAGE_URL`, `YOUR_ALT_TEXT`, en de schaduwwaarden door je vereisten. ``` YOUR_ALT_TEXT ``` Om de schaduw aan te passen, pas je de drie pixelwaarden en de kleurnaam aan: ``` YOUR_ALT_TEXT YOUR_ALT_TEXT ``` OPMERKING Grijs is de meest gebruikte schaduwkleur omdat het werkt tegen zowel lichte als donkere achtergronden. Je kunt vervangen `gray` door elke geldige CSS-kleurnaam of hexcode die bij je ontwerp past. --- ## Hoe voeg je een schaduw toe aan een afbeelding in Markdown 1. Open het gewenste artikel in het Knowledge Base-portaal. 2. Plak het fragment hieronder op de plek waar je wilt dat de afbeelding verschijnt. ``` YOUR_ALT_TEXT ``` 1. Vervang `YOUR_IMAGE_URL` door de URL van je afbeelding. 2. Vervang `YOUR_ALT_TEXT` het door een korte beschrijving van de afbeelding voor toegankelijkheid. 3. Pas de schaduwwaarden aan indien nodig — zie de [referentietabel van de doos-schaduw](/docs/nl/how-to-add-shadows-to-an-image-in-markdown#understanding-the-box-shadow-property) hierboven. --- ## Uitkomst ### Zonder schaduw ![Screenshot of a health check metrics dashboard without a shadow applied.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/1_Screenshot-without_shadow_Featured_image-Health_check_metrics.png) ### Met schaduw ![Screenshot of a health check metrics dashboard with a grey box shadow applied.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/2_Screenshot-with_shadow_Featured_image-Health_check_metrics.png) ## Related - [Hoe voeg je accordeon toe in Markdown](/how-to-add-accordion-in-markdown.md) - [Hoe je de afbeelding uitlijnt in Markdown](/how-to-align-the-image-in-markdown.md) - [Hoe je de kop in de artikelen centraal uitlijnt](/how-to-center-align-the-heading-in-the-articles.md) - [Hoe verander je de kleur van de tekst in Markdown](/how-to-change-the-color-of-the-text-in-markdown.md)