# Fondos para fotos de producto que favorecen al producto [Canonical HTML page](https://gradiently.design/es/guide/product-photo-backgrounds) El fondo de una foto de producto tiene una sola función: que lo que tiene delante luzca lo mejor posible. El color, la luminosidad, la sombra y la coherencia hacen casi todo ese trabajo, y ninguno necesita un estudio. ## The short version - Un buen fondo para fotos de producto contrasta con el producto en luminosidad, para que su forma se lea al instante en miniatura. - Los fondos tonales, una versión más clara o más oscura del color del propio producto, se ven serenos y premium; los complementarios se ven atrevidos y enérgicos. - Una sombra suave bajo el producto lo asienta sobre el fondo, para que un recorte no parezca flotar. - Un degradado suave detrás de un recorte, más claro detrás del producto y más profundo hacia los bordes, imita el fondo curvo de un estudio. - En un catálogo, mantén el mismo fondo, la misma dirección de la luz, el mismo ángulo y el mismo encuadre para que los productos se comparen de un vistazo. El mejor **fondo para fotos de producto** es el que hace que el producto se vea mejor sin llamar la atención sobre sí mismo. Empieza por la luminosidad: un producto oscuro necesita un fondo más claro y uno claro, uno más oscuro, para que la silueta se lea en miniatura. Luego elige una relación de color, tonal para la calma o complementaria para la energía, añade una sombra de contacto suave para que el producto se apoye en la superficie y repite la misma configuración en todos los productos de la gama. Esta guía repasa cada una de esas decisiones, con ejemplos de color, códigos de degradado para recortes y una lista para la coherencia del catálogo. Para pensar el color de forma más amplia, consulta [los colores complementarios](https://gradiently.design/es/guide/complementary-colors) y [la regla 60-30-10](https://gradiently.design/es/guide/60-30-10-rule). ## Cómo elegir el color de fondo para un producto El contraste de luminosidad va primero, porque es lo que hace legible una forma. El color va después y marca el ambiente. Hay tres estrategias de color fiables, cada una con un efecto distinto. | Estrategia | Fondo | Efecto | Encaja con | | --- | --- | --- | --- | | Tonal | Una versión más clara o más oscura del color del producto | Sereno, premium, cohesionado | Belleza, moda, hogar | | Complementaria | Un color opuesto al del producto en el círculo cromático | Atrevido, enérgico, llamativo | Comida, bebidas, juguetes, anuncios en redes | | Neutra | Blanco teñido, piedra, gris o carbón | Limpio, honesto, comparable | Marketplaces, tecnología, catálogos | Tres estrategias. La mayoría de las marcas eligen una como opción por defecto y usan otra para las campañas. - Producto: verde botella: #2f6b4f - Tonal: verde pálido: #dcebe2 - Complementario: coral suave: #f2c6b4 - Neutro: piedra cálida: #f1eee8 - Neutro oscuro: carbón: #1f2320 Un producto verde, cuatro fondos. El verde pálido es sereno y cohesionado, el coral suave hace cantar al verde, la piedra es neutra y el carbón le sienta mejor a un producto de color claro que a este. > **Revisa las normas de cada marketplace** Algunos marketplaces exigen que la imagen principal del producto vaya sobre un fondo blanco liso. Usa fondos de color para las imágenes secundarias, tu propia tienda y las redes sociales, y revisa las normas de imagen vigentes de cada plataforma antes de fotografiar. ## Degradados detrás de productos recortados Los fotógrafos de estudio trabajan sobre un fondo curvo: un telón que va de la pared al suelo sin esquina visible, iluminado para que sea más claro detrás del producto y se apague hacia los bordes. Un degradado suave detrás de un recorte recrea ese aspecto sin estudio. Centra la atención en el producto y añade una profundidad que un color plano no puede dar. - Fondo curvo blanco: `radial-gradient(ellipse at 50% 40%, #ffffff 0%, #eef0f2 55%, #d9dde2 100%)` - Fondo curvo piedra cálida: `radial-gradient(ellipse at 50% 40%, #f6efe6 0%, #e9dccb 55%, #cdb89d 100%)` - Fondo curvo verde tonal: `radial-gradient(ellipse at 50% 40%, #e3f0e8 0%, #c5ddcf 55%, #97bba6 100%)` - Fondo curvo coral: `radial-gradient(ellipse at 50% 40%, #fbe2d6 0%, #f2c6b4 55%, #df9c83 100%)` - Foco sobre carbón: `radial-gradient(ellipse at 50% 35%, #3a3f47 0%, #24272c 55%, #141619 100%)` - Pared y suelo: `linear-gradient(180deg, #eceef1 0%, #eceef1 62%, #d6dae0 100%)` Fondos para recortes. Los fondos curvos radiales iluminan la zona detrás del producto; el último sugiere una pared que se encuentra con el suelo. Mantén la luz detrás del producto, un poco por encima de su centro, como caería una luz real. Que el rango sea suave: el producto debe ser lo de mayor contraste del encuadre, no el brillo del fondo. ## Sombras que asientan el producto Un recorte sin sombra flota. Dos sombras lo arreglan. Una **sombra de contacto** es una línea pequeña, oscura y suave justo donde el producto toca la superficie. Una **sombra proyectada** es una forma más grande, más clara y más suave que se aleja de la luz. La mayoría de los productos necesitan las dos, y las dos deben seguir la misma dirección de luz que los reflejos del propio producto. ```css .product-stage { position: relative; aspect-ratio: 1; background: radial-gradient(ellipse at 50% 40%, #f6efe6 0%, #e9dccb 55%, #cdb89d 100%); display: grid; place-items: center; } /* Soft contact shadow under the product. */ .product-stage::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 17%; height: 5%; background: radial-gradient(closest-side, rgb(40 28 16 / 0.35), transparent); filter: blur(6px); } .product-stage img { position: relative; z-index: 1; width: 62%; margin-bottom: 8%; } ``` Un escenario de producto para la web: un fondo curvo cálido, una sombra de contacto elíptica suave y el recorte encima. Ajusta el ancho y la posición de la sombra a la base del producto. ### Evita - Recortes sin sombra, flotando en el vacío - Una sombra hacia un lado y los reflejos hacia el otro - Sombras paralelas negras y duras - Un fondo más brillante o más saturado que el producto ### Haz - Una sombra de contacto suave donde el producto toca el suelo - Luz y sombra desde una misma dirección - Sombras teñidas con el color del fondo - El producto como el mayor contraste del encuadre ## Mantener coherentes las fotos de producto en un catálogo Un catálogo se lee como una cuadrícula. Cuando todos los productos están sobre el mismo fondo, con el mismo ángulo y la misma escala, la cuadrícula se ve serena y la gente compara productos, no fotos. Cuando cada imagen es distinta, la página parece un mercadillo de desconocidos. 1. **Fija el fondo** Un color o un degradado para las imágenes principales, apuntado con sus códigos exactos. 2. **Fija la luz** Una dirección y una suavidad, para que sombras y reflejos coincidan en todos los productos. 3. **Fija el ángulo** La misma altura y el mismo ángulo de cámara para productos parecidos: frontal, tres cuartos, cenital. 4. **Fija el encuadre** El producto ocupa la misma parte del encuadre, con el mismo margen, centrado en la misma línea. 5. **Fija los tamaños** Exporta todas las imágenes al mismo tamaño para cada canal, como 2048 por 2048 para una imagen de producto de Shopify. - Producto de Shopify 2048×2048: 2048 × 2048 - Anuncio de Etsy 2700×2025: 2700 × 2025 - Publicación de Instagram 1080×1350: 1080 × 1350 - Pin de Pinterest 1000×1500: 1000 × 1500 Un producto, cuatro canales. Un fondo que se extiende con facilidad, como un degradado, se puede generar para cada forma en lugar de estirarse. Una publicación vertical de lanzamiento que anuncia una botella nueva sobre un fondo degradado verde suave Una publicación de lanzamiento de producto sobre un fondo sacado de los colores del producto: la misma familia que las imágenes de la tienda. En Gradiently puedes colocar una foto recortada sobre cualquier Mark, teñir las fotos con los colores del Mark y copiar un diseño terminado a otros tamaños, para que una imagen de campaña, un pin y una historia compartan fondo. Para un producto con un color fuerte, [Igualar una imagen](https://gradiently.design/es/guide/match-a-picture) puede encontrar Marks cuya paleta se le acerque. ## FAQ ### ¿Qué color de fondo es mejor para las fotos de producto? Uno que contraste con el producto en luminosidad. En cuanto al color, elige tonal para un aspecto sereno y premium, complementario para dar energía o un neutro teñido para imágenes de catálogo limpias. ### ¿Las fotos de producto deben tener fondo blanco? Algunos marketplaces exigen blanco para la imagen principal. En el resto de sitios, un neutro teñido o un color tonal suele verse más premium y más fiel a la marca. ### ¿Cómo evito que un producto recortado parezca flotar? Añade una sombra de contacto suave donde toca la superficie y, si hace falta, una sombra proyectada más clara que siga la misma dirección de luz que los reflejos del producto. ### ¿Cómo mantengo coherentes las fotos de producto? Usa el mismo fondo, la misma dirección de luz, el mismo ángulo de cámara, el mismo encuadre y el mismo tamaño de exportación para todos los productos, y deja la configuración por escrito.