---
title: "Cómo añadir sombras a una imagen en 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: ["Editor", "Customization"]
updated: 2026-06-22T08:48:10Z
published: 2026-06-22T08:48:10Z
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.
# Cómo añadir sombras a una imagen en Markdown
El editor Markdown no tiene una forma incorporada de añadir sombras a las imágenes. La solución es usar la etiqueta HTML `<img>` con la `box-shadow` propiedad CSS dentro del `style` atributo, que el editor Markdown de Document360 renderiza correctamente.
---
## Cuándo usar sombras de imagen
- **Imágenes destacadas o imágenes de héroes** — una sombra sutil eleva la imagen de la página y le da peso visual, haciendo que se sienta menos plana sobre un fondo blanco.
- **Capturas de pantalla con fondos blancos o claros** — sin sombra, una captura con fondo claro puede filtrarse en la página. Una sombra crea un límite visible.
- **Imágenes decorativas o de producto** — las sombras aportan profundidad y pulido a las imágenes utilizadas para interés visual más que para instrucción técnica.
Usa las sombras con moderación. Aplicarlas a cada imagen de un artículo crea ruido visual en lugar de énfasis.
NOTA
Esta técnica solo funciona en el **editor Markdown**. En el editor WYSIWYG, usa el interruptor de sombra en el panel de configuración de imagen.
---
## Comprensión de la propiedad de la sombra de caja
La `box-shadow` propiedad CSS toma tres valores en este orden:
| Valor | Lo que controla | Ejemplo |
| --- | --- | --- |
| Desplazamiento horizontal | ¿Hasta dónde se extiende la sombra hacia la izquierda (negativo) o la derecha (positivo) | `3px` |
| Desplazamiento vertical | ¿Hasta dónde se extiende la sombra hacia arriba (negativo) o hacia abajo (positivo) | `3px` |
| Radio de desenfoque | Qué tan nítido o suave se ve el borde de la sombra (más alto = más suave) | `3px` |
| Color | El color de sombra — cualquier nombre de color CSS o código hexadecimal | `gray` |
---
## Referencia rápida
Sustituye `YOUR_IMAGE_URL`, `YOUR_ALT_TEXT`, y los valores de sombra por tus requisitos.
```
```
Para personalizar la sombra, ajusta los tres valores de píxeles y el nombre del color:
```
```
NOTA
El gris es el color de sombra más utilizado porque funciona tanto contra fondos claros como oscuros. Puedes reemplazarlo `gray` por cualquier nombre de color CSS válido o código hexadecimal para que coincida con tu diseño.
---
## Cómo añadir una sombra a una imagen en Markdown
1. Abre el artículo deseado en el portal de la Base de Conocimiento.
2. Pega el fragmento de abajo en la ubicación donde quieres que aparezca la imagen.
```
```
1. Sustituye `YOUR_IMAGE_URL` por la URL de tu imagen.
2. Sustituye `YOUR_ALT_TEXT` por una breve descripción de la imagen para mayor accesibilidad.
3. Ajusta los valores de sombra si es necesario — consulta la [tabla de referencia de sombras en caja](/docs/es/how-to-add-shadows-to-an-image-in-markdown#understanding-the-box-shadow-property) arriba.
---
## Resultado
### Sin sombra
### Con sombra
## Related
- [Cómo añadir acordeón en Markdown](/how-to-add-accordion-in-markdown.md)
- [Cómo alinear la imagen en Markdown](/how-to-align-the-image-in-markdown.md)
- [Cómo centrar la alineación del encabezado en los artículos](/how-to-center-align-the-heading-in-the-articles.md)
- [Cómo cambiar el color del texto en Markdown](/how-to-change-the-color-of-the-text-in-markdown.md)