# Cómo hacer que un degradado quede bien: siete comprobaciones

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

La mayoría de los degradados malos fallan las mismas pocas pruebas. Pasa cualquier mezcla por estas siete comprobaciones, en orden, y sabrás exactamente qué cambiar antes de que nadie más la vea.

## The short version

- Un degradado queda bien cuando sus colores se encuentran sin volverse grises, sus paradas están repartidas de forma desigual y su luz parece venir de un solo sitio.
- Los centros grises o sucios aparecen cuando dos colores opuestos se mezclan directamente; añadir un color puente o mezclar en OKLCH lo arregla.
- Una pequeña cantidad de grano, de alrededor del 2 al 6 por ciento de opacidad, oculta las bandas y hace que un degradado digital parezca una superficie.
- Un buen degradado siempre deja una zona tranquila donde las palabras pueden ir con un contraste fuerte.
- Exporta los degradados en PNG o en vídeo de alta calidad en lugar de JPEG comprimido, que crea franjas visibles.

Saber cómo hacer que un degradado quede bien se reduce a siete comprobaciones, en orden: colores que se encuentran sin volverse grises, paradas repartidas de forma desigual, luz que llega de una dirección, un fondo que marca el ambiente, un toque de grano, un espacio tranquilo para el texto y una exportación que lo mantenga suave. Cada una es una prueba rápida con un arreglo claro. Casi todos los degradados que parecen baratos fallan al menos dos, y arreglar esas dos suele aportar más que cambiar los colores por completo.

| Comprobación | La prueba | Si falla |
| --- | --- | --- |
| 1. Centro limpio | ¿El punto medio es gris o marrón? | Añade un color puente o mezcla en OKLCH |
| 2. Paradas desiguales | ¿Todos los colores ocupan lo mismo? | Da a un color la mayor parte del espacio |
| 3. Una sola luz | ¿Sabes decir dónde está la luz? | Aclara un lado o una esquina |
| 4. Un fondo | ¿Es claramente oscuro o claramente claro? | Lleva la base a algo más oscuro o más pálido |
| 5. Grano | ¿Se ven franjas? | Añade entre un 2 y un 6 por ciento de ruido |
| 6. Espacio para el texto | ¿Se lee el texto en todas partes? | Calma la zona que tiene detrás |
| 7. Exportación | ¿Sobrevive a la subida? | PNG para imágenes fijas, bitrate alto para vídeo |

Toda la comprobación en una página. Recórrela de arriba abajo; los arreglos posteriores dependen de los anteriores.

## 1. Colores que se encuentran limpiamente

Cuando dos colores opuestos en la rueda se mezclan directamente, el centro cae en el gris. Azul a naranja y verde a rosa son los culpables habituales. Añade un color puente entre ellos, para que la mezcla recorra la rueda en vez de cruzar el centro, o mezcla en un espacio de color perceptual. [Degradados sucios](https://gradiently.design/es/guide/muddy-gradients) e [interpolación de degradados](https://gradiently.design/es/guide/gradient-interpolation) explican ambas cosas.

- Falla: centro gris: `linear-gradient(90deg, #2563eb 0%, #f97316 100%)`
- Aprueba: puente magenta: `linear-gradient(90deg, #2563eb 0%, #c026d3 50%, #f97316 100%)`
- Aprueba: mezclado en OKLCH: `linear-gradient(90deg in oklch, #2563eb 0%, #f97316 100%)`

Los mismos dos colores de tres maneras. Un puente o una mezcla perceptual mantienen vivo el centro.

## 2. Paradas repartidas de forma desigual

Los colores repartidos por igual se leen como una rampa de un preset. En la naturaleza, un color suele dominar y el cambio ocurre en un tramo corto: un cielo es casi todo azul con una franja cálida estrecha en el horizonte. Da a tu color principal entre el 60 y el 70 por ciento del encuadre y deja que los demás lleguen tarde. [Paradas de color de un degradado](https://gradiently.design/es/guide/gradient-stops) profundiza en la colocación y las pistas.

- Tercios iguales: `linear-gradient(180deg, #1e3a8a 0%, #7c3aed 50%, #f472b6 100%)`
- Con peso arriba: `linear-gradient(180deg, #1e3a8a 0%, #312e81 55%, #7c3aed 82%, #f472b6 100%)`

Los mismos tres colores. La versión con peso tiene ambiente; la uniforme tiene una fórmula.

## 3. Luz desde una dirección

Un buen degradado parece iluminado. Elige de dónde viene la luz, normalmente de una esquina superior, y haz que esa zona sea la más brillante y saturada. Todo lo demás se aleja de ella. Si no puedes señalar la fuente de luz, el degradado parecerá plano uses los colores que uses. Un [degradado radial](https://gradiently.design/es/guide/radial-gradient) suave sobre uno lineal es la forma más rápida de añadirla.

## 4. Un fondo que marca el ambiente

Decide si el diseño es oscuro o claro, y comprométete. Un degradado que vaga de un violeta medio a un rosa medio no tiene fondo, así que parece indeciso. Una base casi negra hace brillar los colores; un blanco roto cálido los hace parecer impresos. Lleva la base más lejos de lo que te resulte cómodo y luego retrocede un paso.

- Sin fondo: `linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)`
- Fondo oscuro, esquina iluminada: `radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%)`
- Fondo claro, esquina iluminada: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #f5e8ff 40%, #faf7f2 80%)`

Las comprobaciones 3 y 4 juntas. Un fondo claro y una sola luz convierten un preset en una escena.

## 5. Grano: la proporción de ruido adecuada

Los degradados digitales perfectamente lisos muestran franjas en muchas pantallas y parecen ajustes por defecto de un programa. Una capa de ruido fino arregla las dos cosas. El margen útil es estrecho: por debajo de alrededor del 2 por ciento de opacidad no lo verás, y por encima de alrededor del 8 por ciento se lee como una textura intencionada más que como un acabado. Para degradados oscuros, empieza en el 3 por ciento; para los pálidos, en el 5, porque el ruido se ve peor sobre colores claros.

```css
.gradient {
  position: relative;
  background: radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%);
}

.gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
}
```

Una capa de ruido SVG en mosaico al 4 por ciento. Sube o baja la opacidad de uno en uno mientras miras la zona más oscura.

Hay más recetas de grano en [degradados con grano](https://gradiently.design/es/guide/grainy-gradients) y [textura de ruido en CSS](https://gradiently.design/es/guide/css-noise-texture).

## 6. Un espacio tranquilo para el texto

La mayoría de los degradados existen para llevar un mensaje. Busca dónde va el texto y asegúrate de que esa zona sea la más tranquila y uniforme en tono, para que cada línea tenga el mismo contraste. La parte más brillante y recargada del degradado va en otro sitio. Nunca arregles un contraste pobre con un resplandor detrás de las letras: mueve la luz.

Un post de rebajas en el que parte del titular queda sobre una zona brillante del degradado y pierde contraste

Falla la comprobación 6: el color atraviesa las palabras.

El mismo post de rebajas con una zona más tranquila y uniforme detrás del titular, de modo que todas las palabras se leen con claridad

Aprueba: la zona detrás del texto es más tranquila y se lee cada línea.

Esta es la comprobación que Gradiently hace por ti. Un Mark sabe dónde están tus palabras: su zona más tranquila se coloca detrás del texto, los colores cerca de las letras se oscurecen o se aclaran, y Tinta automática elige texto claro u oscuro para cada línea a partir de la propia paleta del Mark.

## 7. Una exportación que lo mantenga suave

- **Imágenes fijas:** exporta en PNG. La compresión JPEG convierte los desvanecidos largos en escalones, y las redes sociales vuelven a comprimir al subir.
- **Vídeo:** usa un MP4 de bitrate alto al tamaño exacto de la plataforma, para que nada se reescale.
- **Tamaño:** exporta a las dimensiones propias de la plataforma, como 1080×1350 para un post de Instagram, en lugar de dejar que la aplicación recorte.
- **Revisa en un móvil:** mira la versión subida, en una habitación oscura, con el brillo al máximo. Ahí es donde se esconden las bandas.

Si las franjas sobreviven a todo esto, [bandas en degradados](https://gradiently.design/es/guide/gradient-banding) tiene los arreglos más profundos.

## FAQ

### ¿Cómo hago que un degradado quede bien?

Usa colores que se mezclen sin volverse grises, reparte las paradas de forma desigual, ilumínalo desde una dirección, decídete por un fondo oscuro o claro, añade un poco de grano y deja un espacio tranquilo para el texto.

### ¿Cuánto ruido debo añadir a un degradado?

Normalmente entre un 2 y un 6 por ciento de opacidad. Empieza en torno al 3 por ciento en degradados oscuros y al 5 en los pálidos, y para en cuanto desaparezcan las franjas.

### ¿Por qué mi degradado se ve sucio?

Dos colores opuestos se están mezclando a través del gris. Añade un color puente entre ellos o mezcla en OKLCH.

### ¿Por qué mi degradado parece barato?

Probablemente son dos colores, repartidos por igual, a 45 grados y sin grano. Son los ajustes por defecto de casi todas las herramientas, así que parecen poco pensados.

### ¿Qué formato de archivo es mejor para los degradados?

PNG para imágenes fijas y MP4 de bitrate alto para vídeo. El JPEG comprimido muestra bandas en los desvanecidos largos y suaves.