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

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.

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 e interpolación de degradados explican ambas cosas.

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 profundiza en la colocación y las pistas.

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 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.

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.

.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;
}

Hay más recetas de grano en degradados con grano y textura de ruido en CSS.

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.

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 tiene los arreglos más profundos.