# Logo sobre fondo degradado: cómo mantenerlo nítido

[Canonical HTML page](https://gradiently.design/es/guide/logo-on-gradient-background)

Los degradados cambian de color a lo ancho, así que un logo que se lee en un extremo puede desaparecer en el otro. Así eliges la versión, el lugar y el color para que nunca pase.

## The short version

- Un logo sobre un fondo degradado funciona mejor en una versión de un solo color, blanca u oscura, que con el original a todo color.
- Como un degradado cambia de luminosidad a lo largo de su superficie, comprueba el contraste justo en el punto donde va el logo, no en todo el fondo.
- Las WCAG eximen a los logos de sus reglas de contraste, pero su mínimo de 3:1 para gráficos con significado es un suelo razonable para que un logo siga siendo reconocible.
- Coloca el logo en la zona más tranquila y uniforme del degradado, normalmente una esquina, y deja espacio libre a su alrededor.
- Toda marca debería tener listas versiones a todo color, en blanco y en oscuro de su logo antes de diseñar sobre degradados.

Para poner un **logo sobre fondo degradado** sin que desaparezca, usa una versión de un solo color del logo, colócalo en la parte más tranquila del degradado donde el contraste es más fuerte y deja espacio libre a su alrededor. Un logo a todo color suele compartir tonos con el degradado y se disuelve en él. Una versión blanca u oscura, colocada donde el degradado es más oscuro o más claro, se mantiene nítida a cualquier tamaño.

El resto de esta guía explica por qué desaparecen los logos, qué versiones preparar, cómo encontrar el lugar adecuado y comprobarlo, con el CSS para hacerlo en la web.

## Por qué desaparecen los logos sobre degradados

Un fondo plano tiene un solo color, así que un logo o contrasta con él o no. Un degradado tiene muchos. Un logo blanco perfectamente claro sobre el extremo oscuro de una mezcla puede desvanecerse por completo sobre el extremo claro, y un logo de color puede parecerse tanto al centro del degradado que sus bordes se difuminan.

Medianoche a violeta a rubor: `linear-gradient(90deg, #1b1033 0%, #6d3fc4 50%, #f6d8c8 100%)`

Un logo blanco se lee con claridad sobre el tercio izquierdo, peor en el centro y casi desaparece a la derecha. Uno oscuro hace lo contrario. Ninguno funciona en todas partes sobre este degradado.

La lección: nunca juzgues un logo frente al degradado entero. Júzgalo frente a los pocos píxeles que tiene justo detrás.

## Prepara las versiones de logo que vas a necesitar

La mayoría de los problemas de un logo sobre degradados se resuelven antes de abrir ningún archivo de diseño, con las versiones adecuadas a mano. Guárdalas juntas en tu [kit de marca](https://gradiently.design/es/guide/brand-kit) para que nadie improvise. Si el logo ya es un degradado, lee antes los [logos con degradado](https://gradiently.design/es/guide/gradient-logo): un símbolo degradado sobre un fondo degradado rara vez funciona.

| Versión | Úsala sobre | Notas |
| --- | --- | --- |
| A todo color | Fondos blancos, blanquecinos o muy claros | La versión maestra. Rara vez sirve sobre un degradado. |
| Mono blanco | Degradados oscuros y medio oscuros | La versión más útil para trabajar con degradados. |
| Mono oscuro | Degradados claros y pastel | Usa un casi negro de tu paleta, no negro puro, si se ve duro. |
| Un color de marca | Degradados neutros o muy claros | Solo cuando el color de marca contrasta con cada píxel de detrás. |
| Solo símbolo | Tamaños pequeños, avatares, esquinas | Conserva su forma donde un logotipo sería demasiado pequeño para leerse. |

Cinco versiones cubren casi cualquier degradado. El mono blanco y el mono oscuro hacen la mayor parte del trabajo.

## Encuentra la zona de contraste y compruébala

Las WCAG, el estándar de accesibilidad web, eximen a los logos de sus reglas de contraste del texto. Esa exención es cuestión de cumplimiento, no de visibilidad. Su mínimo de 3:1 para gráficos con significado es un suelo práctico: por debajo, un logo empieza a perder los bordes. Compruébalo así.

1. **Coloca el logo de forma aproximada** Ponlo donde lo pida la composición, normalmente una esquina o el centro superior.
2. **Toma muestras de los colores de detrás** Usa el cuentagotas en el píxel más claro y en el más oscuro justo detrás del logo. En un degradado pueden diferir mucho, incluso en una zona pequeña.
3. **Prueba ambos frente al color del logo** Pasa cada pareja por un comprobador de contraste, como el de [WebAIM](https://webaim.org/resources/contrastchecker/). Busca al menos 3:1 frente al peor de los dos, y más para logos pequeños.
4. **Mueve, no parchees** Si falla, mueve el logo hacia el extremo más oscuro o más claro del degradado, o cambia a la otra versión mono, antes de recurrir a una caja o a una sombra.
5. **Compruébalo en pequeño** Reduce el diseño al tamaño de una miniatura. Si el logo se vuelve una mancha, usa ahí la versión de solo símbolo.

Nuestra guía de [contraste de color](https://gradiently.design/es/guide/color-contrast-accessibility) explica las proporciones con más detalle, y el [texto sobre degradado](https://gradiently.design/es/guide/text-on-gradient) trata el mismo problema para los titulares.

## Dónde colocar un logo sobre un degradado

Busca la zona donde el degradado cambia menos. Un logo que cruza un cambio brusco de color parece estar a horcajadas sobre dos fondos. Las esquinas suelen ser tranquilas, porque muchos degradados hacen su mezcla más dramática en el centro. Dale al logo espacio libre por todos los lados, al menos la altura de una de sus letras, para que el degradado lo enmarque en lugar de agobiarlo.

Un diseño cuadrado con el logotipo Northlight sobre un degradado animado, con textura que atraviesa las letras

El logotipo sobre la parte más agitada del fondo: sus bordes se suavizan donde cambia el color.

El mismo diseño cuadrado donde el degradado detrás del logotipo Northlight es más calmado y uniforme, y las letras se leen con nitidez

El mismo logotipo con la zona más tranquila movida detrás: bordes limpios y sin caja.

En Gradiently, un Mark sabe dónde están tus palabras y tu logo: su zona más tranquila y de mejor contraste se mueve detrás de ellos y el detalle recargado se relaja cerca, así que rara vez tendrás que buscar el lugar adecuado a mano. Los logos de tu kit de marca entran directamente en cualquier diseño.

## Calado, sólido o sobre placa

Hay tres maneras de colocar un logo sobre color, y cada una va con un degradado distinto.

### Logo mono sólido

- El logo es de un solo color plano, blanco u oscuro
- Funciona en casi todos los degradados si va en la zona adecuada
- La opción por defecto para publicaciones y banners
- Se mantiene limpio al comprimirse

### Calado o placa

- Calado: el logo se recorta de una forma sólida para que el degradado se vea a través de las letras
- Placa: el logo se apoya en una pequeña forma sólida, como una insignia
- Ambos garantizan el contraste en degradados muy cargados
- Ambos añaden una forma al diseño, así que úsalos a propósito, no como rescate

## Poner un logo sobre un degradado CSS

En la web, dibuja el logo como un SVG en línea que use `currentColor`, para que un solo color CSS cambie entre la versión blanca y la oscura. Después colócalo en la esquina donde el degradado es más oscuro. Con un degradado de 135 grados, la esquina superior izquierda es donde está el primer color.

```css
.hero {
  position: relative;
  background: linear-gradient(135deg, #1b1033 0%, #6d3fc4 55%, #f6d8c8 100%);
}

/* The SVG's paths use fill="currentColor" */
.hero .logo {
  position: absolute;
  top: 48px;
  left: 48px; /* the darkest corner of this gradient */
  width: 160px;
  color: #ffffff;
}

/* On a light gradient, switch to the dark version */
.hero.light .logo {
  color: #1b1033;
}
```

Un SVG, dos versiones. El color sigue al degradado, no al revés.

> **Evita la sombra paralela** Una sombra suave tras un logo es el rescate más común y suele notarse: un halo gris sobre un fondo colorido. Antes, mueve el logo o cambia su versión.

## FAQ

### ¿Qué color de logo funciona mejor sobre un fondo degradado?

Normalmente una versión de un solo color: blanco sobre degradados oscuros o medio oscuros, y un casi negro de tu paleta sobre los claros o pastel. Los logos a todo color tienden a fundirse con el degradado.

### ¿Dónde debe ir un logo sobre un degradado?

En la zona más tranquila y uniforme con el contraste más fuerte, a menudo una esquina, con espacio libre alrededor de al menos la altura de una de sus letras.

### ¿Los logos tienen que cumplir requisitos de contraste?

Las WCAG eximen a los logos de sus reglas de contraste del texto, pero usar su mínimo de 3:1 para gráficos con significado como suelo mantiene el logo reconocible.

### ¿Debo poner una sombra o una caja detrás de mi logo?

Primero prueba a mover el logo o a cambiar a la versión blanca u oscura. Las cajas y las sombras funcionan, pero añaden ruido visual; usa una placa o un calado deliberados si los necesitas.

### ¿Qué es un logo calado?

Un logo calado se recorta de una forma sólida, de modo que el fondo, en este caso el degradado, se ve a través de las letras.