--- title: "How to add shadows to an image 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-20T09:02:50Z published: 2026-06-20T09:02:50Z 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. # How to add shadows to an image in Markdown The Markdown editor does not have a built-in way to add shadows to images. The workaround is to use the HTML `<img>` tag with the `box-shadow` CSS property inside the `style` attribute, which Document360's Markdown editor renders correctly. --- ## When to use image shadows - **Featured images or hero images** — a subtle shadow lifts the image off the page and gives it visual weight, making it feel less flat against a white background. - **Screenshots with white or light backgrounds** — without a shadow, a screenshot with a light background can bleed into the page. A shadow creates a visible boundary. - **Decorative or product images** — shadows add depth and polish to images used for visual interest rather than technical instruction. Use shadows sparingly. Applying them to every image in an article creates visual noise rather than emphasis. NOTE This technique only works in the **Markdown editor**. In the WYSIWYG editor, use the shadow toggle in the image settings panel instead. --- ## Understanding the box-shadow property The `box-shadow` CSS property takes three values in this order: | Value | What it controls | Example | | --- | --- | --- | | Horizontal offset | How far the shadow extends left (negative) or right (positive) | `3px` | | Vertical offset | How far the shadow extends up (negative) or down (positive) | `3px` | | Blur radius | How sharp or soft the shadow edge appears (higher = softer) | `3px` | | Colour | The shadow colour — any CSS colour name or hex code | `gray` | --- ## Quick reference Replace `YOUR_IMAGE_URL`, `YOUR_ALT_TEXT`, and the shadow values with your requirements. ``` YOUR_ALT_TEXT ``` To customise the shadow, adjust the three pixel values and the colour name: ``` YOUR_ALT_TEXT YOUR_ALT_TEXT ``` NOTE Grey is the most commonly used shadow colour because it works against both light and dark backgrounds. You can replace `gray` with any valid CSS colour name or hex code to match your design. --- ## How to add a shadow to an image in Markdown 1. Open the desired article in the Knowledge Base portal. 2. Paste the snippet below at the location where you want the image to appear. ``` YOUR_ALT_TEXT ``` 1. Replace `YOUR_IMAGE_URL` with the URL of your image. 2. Replace `YOUR_ALT_TEXT` with a short description of the image for accessibility. 3. Adjust the shadow values if needed — see the [box-shadow reference table](/docs/how-to-add-shadows-to-an-image-in-markdown#understanding-the-box-shadow-property) above. --- ## Outcome ### Without shadow ![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) ### With shadow ![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 - [How to add accordion in Markdown](/how-to-add-accordion-in-markdown.md) - [How to align the image in Markdown](/how-to-align-the-image-in-markdown.md) - [How to center align the heading in the articles](/how-to-center-align-the-heading-in-the-articles.md) - [How to change the color of the text in Markdown](/how-to-change-the-color-of-the-text-in-markdown.md)