Añadir sombra a la imagen

La herramienta Añadir sombra a la imagen levanta cualquier foto de la página con una sombra suave y creíble, enteramente dentro de tu navegador. Sube una foto, una captura de pantalla, un logotipo o un PNG recortado, arrastra la fuente de luz para fijar el ángulo y luego ajusta el desenfoque, la extensión, la opacidad y el color. En un PNG transparente la sombra se construye a partir del canal alfa de la imagen, de modo que un producto o una pegatina proyecta una sombra con su propio contorno en lugar de un rectángulo. Exporta un PNG con fondo transparente, un JPG sobre un fondo sólido o degradado, o copia el código CSS box-shadow equivalente. No se sube nada: tu imagen nunca sale de tu dispositivo.

Los tres números que hacen una sombra: desplazamiento, desenfoque y extensión

Casi toda sombra mala viene de equivocar uno de estos tres. El desplazamiento es hasta dónde se empuja la sombra respecto al sujeto: indica al espectador de dónde viene la luz y a qué altura flota el objeto. El desenfoque es qué tan suave es el borde: un desenfoque pequeño se lee como luz dura y directa (sol, un flash); un desenfoque grande se lee como luz difusa (un día nublado, una caja de luz). La extensión agranda o reduce la forma de la sombra antes de aplicar el desenfoque, que es como se obtiene un halo pesado o una sombra un poco metida debajo del objeto.

Cómo añadir una sombra a tu imagen

1. Sube tu imagen: Arrastra una foto al recuadro de carga o toca para elegir una. No se sube nada: el archivo se lee directamente en tu navegador.
2. Coloca la luz: Arrastra el sol en el panel Fuente de luz. La sombra cae en el lado opuesto, y al arrastrar más lejos del centro la alejas. Las flechas del teclado también funcionan.
3. Da forma a la sombra: Elige un tipo — Proyectada, En capas, Larga o Resplandor — y luego define el Desenfoque, la Extensión, la Opacidad y el color de la sombra.
4. Elige un fondo: Déjalo Transparente para un PNG, o rellénalo con un color sólido o un degradado. El Relleno extra añade margen alrededor del resultado.
5. Descarga o copia: Guarda un PNG o JPG a tamaño original, a la mitad o a 2×, o copia el CSS generado para reutilizar la misma sombra en un elemento web.

Sombras que siguen al sujeto, no al recuadro

La mayoría de las herramientas de sombra en línea dibujan un rectángulo detrás de tu archivo. Eso vale para una foto, pero no para un producto recortado, un logotipo o una pegatina: una botella redonda no debería proyectar una sombra cuadrada. Esta herramienta lee el canal alfa de tu imagen y construye la sombra a partir de la silueta real, de modo que las zonas transparentes quedan sin sombra. Sube un PNG transparente y verás una nota verde que lo confirma. En una foto opaca normal, la silueta es simplemente el rectángulo de la imagen — redondeado primero, si defines un radio de esquina.

¿Qué tipo de sombra deberías usar?

Por qué porcentajes, no píxeles

Cada control deslizante aquí es un porcentaje del lado más corto de la imagen. Un desenfoque del 9% se ve igual en una miniatura de 400 px que en una foto de 4000 px, así que un preajuste que te guste sigue funcionando al cambiar a una imagen más grande, sin recalcular. La herramienta sigue mostrando el valor equivalente en píxeles junto al control de desenfoque y dentro del panel CSS, para cuando necesites números reales.

Consejos para una sombra creíble

¿Mi imagen es privada?

Sí. A diferencia de los editores en línea que suben tu foto a un servidor para procesarla, esta herramienta funciona por completo en tu navegador web usando el canvas HTML5. Tu imagen nunca sale de tu dispositivo, no se almacena nada y no hay que crear una cuenta. Cierra la pestaña y la imagen desaparece.

Preguntas frecuentes

¿Esta herramienta de sombra es gratuita y privada?

Sí. Es totalmente gratuita y funciona por completo en tu navegador web usando el canvas HTML5, así que tu imagen nunca se sube a ningún servidor y permanece en tu propio dispositivo. La imagen descargada no tiene marca de agua y no hay que registrarse.

¿La sombra sigue la forma de un PNG transparente?

Sí. La sombra se construye a partir del canal alfa de la imagen, de modo que un producto recortado, un logotipo o una pegatina proyecta una sombra con su propio contorno en lugar de un rectángulo. Si la imagen es una foto opaca normal, la silueta es el rectángulo de la foto, opcionalmente con esquinas redondeadas.

¿Cómo conservo el fondo transparente?

Pon el fondo en Transparente y descarga un PNG. Solo se dibujan la sombra y el sujeto, así que luego puedes colocar el resultado sobre cualquier color. El JPG no puede almacenar transparencia, así que una exportación JPG rellena el fondo de blanco.

¿Cuál es la diferencia entre desenfoque y extensión?

El desenfoque suaviza el borde de la sombra y la desvanece a lo largo de una distancia. La extensión agranda o reduce la forma de la sombra antes de desenfocarla, de modo que una extensión grande con poco desenfoque da un halo duro, mientras que una extensión pequeña con mucho desenfoque da una nube suave.

¿Por qué se recorta mi sombra en el borde de la imagen?

Una sombra necesita espacio fuera de la foto. Esta herramienta añade relleno automáticamente a partir del desplazamiento, el desenfoque y la extensión, y puedes añadir más con el control de Relleno extra. Si exportas un JPG sobre un fondo de color, ese relleno es donde aterriza la sombra.

¿Puedo obtener el CSS de la misma sombra?

Sí. El panel CSS muestra una regla box-shadow y filter drop-shadow lista para pegar que coincide con los ajustes actuales, en píxeles medidos sobre tu imagen. Cópiala para dar a un elemento web el mismo aspecto sin exportar un archivo.

Recursos adicionales

• CSS box-shadow — MDN
• filter: drop-shadow() — MDN
• Composición alfa — Wikipedia