Cómo hacer un fondo degradado que no parezca genérico

Para hacer un fondo degradado que no parezca genérico, elige primero un color base, añade de tres a cinco colores relacionados en lugar de dos, da a la superficie un material como el grano o una luz suave y deja una zona tranquila donde irán las palabras. La mayoría de los fondos degradados se saltan todos esos pasos: toman un preajuste de dos colores, lo hacen correr de esquina a esquina y se detienen. Por eso tantos parecen intercambiables.

Por qué la mayoría de los fondos degradados se parecen

Las herramientas de diseño, los generadores y las plantillas ofrecen la misma lista corta de mezclas, y las tendencias empujan a todos hacia los mismos tonos en el mismo momento. De violeta a rosa, de azul a cian y de naranja a magenta son agradables, pero se usan tan ampliamente que se leen como un valor por defecto y no como una elección. El patrón más amplio se explica en por qué todos los feeds se ven igual.

Paso 1: elige una base

La base es el color sobre el que se asienta el degradado y al que vuelve. Fija el ambiente más que cualquier acento. Una base casi negra hace que el color brille y se siente premium y nocturna; una base cálida de blanco roto se siente impresa, calmada y editorial. Elige una antes de elegir un solo acento y mantenla en todo el conjunto de diseños.

Si eliges oscuro, lee fondos de degradado oscuro antes de exportar, porque las mezclas oscuras son donde más se notan las bandas.

Paso 2: elige de tres a cinco colores relacionados

Dos colores son el degradado más fácil de hacer y el más fácil de copiar. Una pequeña familia da profundidad: un tono de sombra, un tono principal, un realce y un acento usado con moderación. Mantén los vecinos cerca en el círculo cromático para que las mezclas sigan limpias, y deja el acento aparte. Los colores opuestos colocados uno junto a otro se volverán grises donde se encuentren, algo que cubre degradados turbios.

Paso 3: dale un material

Una mezcla digital limpia parece un valor por defecto de pantalla. Un material hace que parezca una superficie. El grano se lee como película o impresión, la textura del papel se lee como artesanía, un brillo vítreo se lee como tecnología y una seda suave se lee como lujo. No necesitas mucho: una capa de ruido con poca opacidad basta para cambiar la sensación. Textura de degradado compara las familias, y degradados con grano trae el código.

Paso 4: planifica dónde irán las palabras

Un fondo existe para llevar algo: un titular, un precio, una fecha. Decide dónde van esas palabras antes de terminar el degradado, y mantén esa zona más calmada y con más contraste. Pon el color más brillante y cargado lejos del texto, normalmente en una esquina, y deja que la base se vea detrás de las palabras. Para las reglas de contraste, mira contraste de color y accesibilidad.

Paso 5: renderízalo para cada formato

Un degradado que se ve bien como publicación cuadrada puede verse mal como story vertical, porque al recortar se mueve la zona brillante. Trata el fondo como una receta que renderizas en cada tamaño, ajustando dónde cae la luz, y no como una sola imagen que recortas.

Publicación 1080×1350

1080 × 1350

Story 1080×1920

1080 × 1920

Portada web 1920×1080

1920 × 1080

Banner de blog 1200×600

1200 × 600

Un fondo degradado en CSS

En la web, un degradado de página completa tiene un error clásico: si la página es corta, el fondo se repite en bandas. Da al elemento raíz una altura mínima, fija un color liso de reserva que también se vea al hacer overscroll y luego apila el degradado.

html {
  min-height: 100%;
  background-color: #0f0b1e; /* fallback, and the colour seen on overscroll */
}

body {
  min-height: 100vh;
  margin: 0;
  background-image:
    radial-gradient(circle at 80% 15%, #6d28d9 0%, transparent 45%),
    radial-gradient(circle at 10% 90%, #312e81 0%, transparent 50%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}

Para una sección de portada y no una página entera, las mismas capas funcionan sobre la propia sección. Fondos para la portada de un sitio web cubre tamaños y rendimiento.

Hacerte dueño de tu fondo degradado

Incluso un fondo hecho con cuidado puede copiarse y reutilizarse. En Gradiently, un fondo terminado es un Mark: una receta de colores, materiales, luz, grano y movimiento con exactamente un propietario a la vez. Se renderiza en cada tamaño en el que diseñas y deja espacio a tus palabras por sí solo. Puedes diseñar con cualquier Mark gratis y reservar uno para hacerlo tuyo.