--- title: "Wie man Schatten zu einem Bild in Markdown hinzufügt" 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-22T08:43:25Z published: 2026-06-22T08:43:25Z 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. # Wie man Schatten zu einem Bild in Markdown hinzufügt Der Markdown-Editor hat keine eingebaute Möglichkeit, Schatten zu Bildern hinzuzufügen. Der Workaround besteht darin, das HTML-Tag `<img>` mit der `box-shadow` CSS-Eigenschaft innerhalb des `style` Attributs zu verwenden, was der Markdown-Editor von Document360 korrekt darstellt. --- ## Wann sollte man Bildschatten verwenden - **Featured Images oder Heldenbilder** – ein dezenter Schatten hebt das Bild vom Papier ab und verleiht ihm visuelles Gewicht, sodass es auf einem weißen Hintergrund weniger flach wirkt. - **Screenshots mit weißem oder hellem Hintergrund** – ohne Schatten kann ein Screenshot mit hellem Hintergrund auf die Seite übergehen. Ein Schatten bildet eine sichtbare Grenze. - **Dekorative oder Produktbilder** – Schatten verleihen Bildern Tiefe und Feinschliff, die für visuelles Interesse statt für technische Anleitung dienen. Benutze Schatten sparsam. Wenn man sie auf jedes Bild eines Artikels anwendet, entsteht visuelles Rauschen statt Betonung. HINWEIS Diese Technik funktioniert nur im **Markdown-Editor**. Im WYSIWYG-Editor verwenden Sie stattdessen den Schatten-Schalter im Bildeinstellungspanel. --- ## Verständnis der Box-Shadow-Eigenschaft Die CSS-Eigenschaft `box-shadow` nimmt in dieser Reihenfolge drei Werte an: | Wert | Was er kontrolliert | Beispiel | | --- | --- | --- | | Horizontaler Offset | Wie weit der Schatten nach links (negativ) oder rechts (positiv) reicht) | `3px` | | Vertikaler Versatz | Wie weit der Schatten nach oben (negativ) oder nach unten (positiv) reicht | `3px` | | Unschärferadius | Wie scharf oder weich der Schattenrand erscheint (höher = weicher) | `3px` | | Farbe | Die Schattenfarbe – jeder CSS-Farbname oder Hex-Code | `gray` | --- ## Kurze Referenz Ersetze `YOUR_IMAGE_URL`, `YOUR_ALT_TEXT`, und die Schattenwerte durch deine Anforderungen. ``` YOUR_ALT_TEXT ``` Um den Schatten anzupassen, passen Sie die drei Pixelwerte und den Farbnamen an: ``` YOUR_ALT_TEXT YOUR_ALT_TEXT ``` HINWEIS Grau ist die am häufigsten verwendete Schattenfarbe, da sie sowohl auf hellen als auch auf dunklen Hintergründen funktioniert. Du kannst sie durch jeden gültigen CSS-Farbnamen oder Hex-Code ersetzen `gray` , der zu deinem Design passt. --- ## Wie man einen Schatten zu einem Bild in Markdown hinzufügt 1. Öffnen Sie den gewünschten Artikel im Knowledge Base-Portal. 2. Füge den untenstehenden Ausschnitt an die Stelle ein, an der das Bild erscheinen soll. ``` YOUR_ALT_TEXT ``` 1. Ersetzen Sie `YOUR_IMAGE_URL` sie durch die URL Ihres Bildes. 2. Ersetzen `YOUR_ALT_TEXT` Sie sie durch eine kurze Beschreibung des Bildes zur Zugänglichkeit. 3. Passen Sie die Schattenwerte bei Bedarf an – siehe oben die [Kasten-Schatten-Referenztabelle](/docs/de/how-to-add-shadows-to-an-image-in-markdown#understanding-the-box-shadow-property) . --- ## Ergebnis ### Ohne Schatten ![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) ### Mit Schatten ![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 - [Wie man Akkordeon in Markdown hinzufügt](/how-to-add-accordion-in-markdown.md) - [Wie man das Bild in Markdown ausrichtet](/how-to-align-the-image-in-markdown.md) - [Wie man die Überschrift in den Artikeln zentriert.](/how-to-center-align-the-heading-in-the-articles.md) - [Wie man die Farbe des Textes in Markdown ändert](/how-to-change-the-color-of-the-text-in-markdown.md)