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.
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.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="box-shadow: 3px 3px 3px gray;">
To customise the shadow, adjust the three pixel values and the colour name:
<!-- Larger, softer shadow -->
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="box-shadow: 5px 5px 10px #999999;">
<!-- No horizontal offset, tight shadow below only -->
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="box-shadow: 0px 4px 4px gray;">
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
- Open the desired article in the Knowledge Base portal.
- Paste the snippet below at the location where you want the image to appear.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="box-shadow: 3px 3px 3px gray;">
- Replace
YOUR_IMAGE_URLwith the URL of your image. - Replace
YOUR_ALT_TEXTwith a short description of the image for accessibility. - Adjust the shadow values if needed — see the box-shadow reference table above.
Outcome
Without shadow
With shadow
