# Logotipos con degradado famosos: lo que enseñan las grandes marcas

[Canonical HTML page](https://gradiently.design/es/guide/famous-gradient-logos)

Unos pocos rediseños muy documentados convirtieron los degradados de una moda en una parte estándar del diseño de logotipos. Esto es lo que cambió y lo que cualquier marca puede aprender de ello.

## The short version

- Los logotipos con degradado se generalizaron a mediados de la década de 2010, cuando grandes apps sustituyeron los iconos detallados o planos por glifos sencillos sobre degradados de colores.
- El rediseño de Instagram de 2016 cambió un icono de cámara detallado por un simple contorno de cámara sobre un degradado de cálido a violeta, con lo que el color pasó a ser la principal señal de reconocimiento.
- Messenger pasó de un azul liso a un degradado de azul, morado y rosa en 2020, al mismo tiempo que introdujo la mensajería entre Instagram y Messenger.
- El sistema de marca de Mozilla de 2019 dio a Firefox y a sus productos relacionados una familia común de degradados vivos, mostrando cómo un degradado puede unir varias marcas.
- Las lecciones para cualquier logotipo con degradado: mantén la forma sencilla, conserva un color reconocible, fija el degradado con exactitud y ten siempre una versión plana.

Los **logotipos con degradado famosos** pasaron de ser raros a estar en todas partes a mediados de la década de 2010, cuando algunas de las apps más usadas del mundo pasaron a glifos sencillos sobre degradados de colores. El cambio dio a los diseñadores una lección que sigue vigente: cuando un logotipo aparece como un pequeño cuadrado entre decenas de otros, el color hace más trabajo de reconocimiento que la forma. Las mejores identidades con degradado combinan una marca muy sencilla con un degradado fijo, distintivo y usado en todas partes.

Este artículo repasa tres rediseños muy documentados y extrae de ellos lecciones generales. Describe lo que cambió públicamente, no cómo ni por qué lo decidieron las empresas. Para el oficio de hacer uno, mira [logotipos con degradado: cuándo funcionan](https://gradiently.design/es/guide/gradient-logo).

## Por qué los logotipos con degradado se apoderaron de los iconos de apps

Las pantallas de inicio de los móviles cambiaron lo que tiene que hacer un logotipo. Cada app recibe el mismo cuadrado redondeado, más o menos del mismo tamaño, rodeado de otros. Las ilustraciones detalladas se emborronan a ese tamaño, y un único color liso lo comparten decenas de otras apps. Un degradado ofrece algo intermedio: una firma de color con más combinaciones de las que permite el color liso, legible incluso cuando el glifo de encima es demasiado pequeño para verse con claridad.

- Colores lisos: fáciles de compartir: `linear-gradient(90deg, #3b82f6 0% 33%, #22c55e 33% 66%, #ef4444 66% 100%)`
- Un degradado: más difícil de confundir: `linear-gradient(45deg, #fbbf24 0%, #f97316 30%, #db2777 60%, #7c3aed 100%)`

Los colores de marca lisos se repiten por toda una pantalla de inicio. Un degradado específico de varias paradas es una firma mucho más rara.

## Instagram, 2016: el degradado se convierte en la marca

En mayo de 2016 Instagram sustituyó su icono de cámara retro y detallado por un simple contorno de cámara en blanco sobre un degradado que iba del amarillo cálido y el naranja abajo a la izquierda, pasando por el rosa y el magenta, hasta el morado arriba a la derecha. En el lanzamiento, la empresa presentó los colores como una evolución de la franja arcoíris del icono antiguo. El rediseño provocó reacciones fuertes al principio, y el degradado ha permanecido en el centro de la marca desde entonces, renovado en 2022 junto con una nueva tipografía.

Diagonal de cálido a violeta: `linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%)`

Un degradado de la misma familia que el icono de 2016: cálido en una esquina, frío en la opuesta. Una aproximación para estudiar, no un color oficial de la marca.

- **El glifo se simplificó a medida que el color se enriquecía.** Una cámara en contorno deja espacio para que el degradado sea la parte reconocible.
- **Se conservó el valor ya acumulado.** Los colores del icono antiguo se reinterpretaron en lugar de tirarse.
- **Un recorrido diagonal de cálido a frío** da al degradado una dirección que la gente recuerda, no solo un conjunto de colores.

## Messenger, 2020: un cambio de color que anunció un cambio de producto

En 2020 Messenger sustituyó su logotipo de azul liso por un degradado de azul, morado y rosa. El cambio llegó a la vez que la mensajería entre Instagram y Messenger. La forma, un globo de diálogo con un rayo, se mantuvo, de modo que la gente podía seguir encontrándolo; solo se movió el color.

- Antes: un solo azul liso: `linear-gradient(180deg, #0084ff 0%, #0084ff 100%)`
- Después: azul hacia morado y rosa: `linear-gradient(45deg, #0695ff 0%, #a334fa 55%, #ff6968 100%)`

Aproximaciones del antes y el después. Mantener la forma mientras se cambia el color permite que un logotipo conocido anuncie algo nuevo.

La lección: un degradado puede decir «esto ha cambiado» sin perder reconocimiento, siempre que se mantenga la forma que la gente conoce. Es un patrón útil para cualquier [rediseño de marca](https://gradiently.design/es/guide/rebrand-checklist): cambia una señal fuerte cada vez.

## Firefox, 2019: una familia de degradados para muchos productos

En 2019 Mozilla presentó un nuevo sistema de marca en el que Firefox pasó a ser el nombre de una familia de varios productos. El logotipo del navegador conservó su zorro, simplificado, y la familia compartió degradados vivos de amarillo, naranja, rojo, rosa y morado en los iconos de los productos. Cada icono tenía su propia forma, pero los degradados compartidos hacían que se leyeran como parientes.

- Rampa cálida de la familia: `linear-gradient(135deg, #fff44f 0%, #ff980e 35%, #ff3750 70%, #9059ff 100%)`
- Rampa hermana, desplazada: `linear-gradient(135deg, #ff980e 0%, #ff3750 50%, #b833e1 100%)`
- Hermana más fría: `linear-gradient(135deg, #ff3750 0%, #b833e1 50%, #592acb 100%)`

Una forma de que funcione una familia de degradados: desplaza la ventana a lo largo de una rampa compartida para que cada producto tenga su propia mezcla y todos sigan perteneciendo al conjunto.

## Qué tienen en común estas identidades con degradado

| Identidad | Año | Qué cambió | Lección |
| --- | --- | --- | --- |
| Instagram | 2016 | De una cámara detallada a un glifo en contorno sobre un degradado de cálido a violeta | Simplifica la forma y deja que el color lleve el reconocimiento |
| Messenger | 2020 | De azul liso a un degradado de azul, morado y rosa | Mantén la forma y cambia el color para señalar una novedad |
| Firefox | 2019 | De un único logotipo de navegador a una familia con degradados compartidos | Una rampa de degradado puede unir muchas marcas |

Las tres ponen una forma sencilla y familiar sobre un degradado exacto y repetido en todas partes.

## Cinco lecciones para tu propio logotipo con degradado

1. **Mantén la forma muy sencilla** El degradado es lo que habla, así que la marca de encima debe leerse al tamaño de un icono de app o de un avatar.
2. **Conserva un color reconocible** Si ya tienes un color conocido, construye el degradado a partir de él. El reconocimiento que ya te has ganado merece conservarse.
3. **Fija el degradado con exactitud** Anota cada parada, posición y ángulo. Un degradado reconstruido a ojo se desvía, y el reconocimiento se desvía con él. [Coherencia de marca](https://gradiently.design/es/guide/brand-consistency) explica por qué.
4. **Ten siempre una versión plana** Los favicons, el bordado, la impresión a un color y algunas interfaces no pueden mostrar un degradado. Elige un color liso y una versión del glifo en blanco o negro.
5. **Usa el degradado más allá del logotipo** Los ejemplos más fuertes repiten su degradado en fondos, realces y movimiento, de modo que se convierte por sí mismo en un [activo de marca distintivo](https://gradiently.design/es/guide/distinctive-brand-assets).

```css
.logo-tile {
  /* Flat fallback: the one colour chosen for small or limited uses */
  background-color: #d62976;
  /* The exact gradient, with every stop recorded */
  background-image: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%);
  border-radius: 22%;
  aspect-ratio: 1;
}
```

Un mosaico con degradado con su color liso declarado primero. Escribir las paradas es lo que mantiene el logotipo idéntico en todas partes.

Un degradado también puede salir mal detrás de un logotipo en lugar de dentro de él. Si tu logotipo va sobre tu propio degradado, lee [poner un logotipo sobre un degradado](https://gradiently.design/es/guide/logo-on-gradient-background), y para construir toda una identidad en torno a uno, [branding con degradados](https://gradiently.design/es/guide/gradient-branding).

## FAQ

### ¿Cuándo cambió Instagram a un logotipo con degradado?

En mayo de 2016, cuando sustituyó su icono de cámara detallado por un simple contorno de cámara sobre un degradado que iba del amarillo y el naranja, pasando por el rosa, hasta el morado.

### ¿Por qué tantas apps usan logotipos con degradado?

Los iconos de las apps comparten todos el mismo pequeño cuadrado redondeado, así que el color hace la mayor parte del trabajo de reconocimiento. Un degradado específico es más distintivo que un único color liso.

### ¿Funcionan los logotipos con degradado en impresión?

A menudo, con cuidado. Los degradados pueden formar bandas o cambiar de color en impresión, así que todo logotipo con degradado debe tener también una versión en color liso y versiones en blanco y negro a un solo color.

### ¿Cómo hago un logotipo con degradado que siga siendo reconocible?

Usa una forma sencilla, fija las paradas y el ángulo exactos, repite el degradado por toda tu marca y ten un color liso de reserva para usos pequeños o limitados.