Fondos abstractos: formas, campos y fluidez

Un fondo abstracto está hecho de color, forma y textura, y no de una escena reconocible. Casi todos pertenecen a una de tres familias: fondos geométricos, construidos con bordes duros, rayas y patrones; fondos fluidos, construidos con mezclas suaves y campos que fluyen; y fondos texturados, construidos con grano, ruido y materia. Elige la familia que encaje con la sensación que buscas y deja una zona tranquila donde vayan las palabras.

Esta guía repasa cada familia con ejemplos vivos y códigos, cuándo usar cada una y cómo evitar que un fondo abstracto se coma el contenido. Para los tipos de degradado que hay debajo de muchos de ellos, mira los tipos de degradados.

Tres tipos de fondo abstracto

Fondos abstractos geométricos

Los fondos geométricos usan bordes nítidos: cortes, rayas, anillos, cuñas y cuadrículas. Se sienten intencionados y estructurados, y combinan de forma natural con maquetaciones tipográficas fuertes como el estilo suizo. En CSS, las paradas de color duras (dos colores en la misma posición) crean los bordes.

El truco de los fondos geométricos es el tono. Las rayas o los cuadros de alto contraste vibran y hacen casi imposible leer el texto encima. Mantén los colores del patrón cerca en luminosidad, como en las rayas y los anillos tonales de arriba, y reserva el alto contraste para las zonas sin palabras. Los patrones CSS tienen muchos más.

Fondos abstractos fluidos

Los fondos fluidos no tienen bordes en absoluto: el color se acumula, se desliza y se pliega como la luz sobre el agua o la seda. Incluyen los degradados de malla, los resplandores de aurora y las cintas que fluyen. Resultan más calmados y más premium que los geométricos, y son los fondos abstractos más fáciles para poner texto encima, porque un campo suave tiene grandes zonas uniformes.

.fluid {
  background-color: #2b1055;
  background-image:
    radial-gradient(40% 50% at 20% 30%, #ff7a59cc, transparent 70%),
    radial-gradient(45% 55% at 80% 25%, #c43d7acc, transparent 70%),
    radial-gradient(50% 60% at 60% 85%, #5b3cc4cc, transparent 70%);
}

Los fondos fluidos vienen en estilos con nombre: los degradados de malla mezclan varios puntos de color sobre una superficie, y los degradados de aurora hacen flotar manchas luminosas sobre una base oscura. Ambos quedan mejor con un poco de grano por encima.

Fondos abstractos texturados

La textura convierte un color plano en una superficie que casi se puede tocar. El grano fino se lee como película, un relieve más grueso como papel, las fibras suaves como tela, un desenfoque esmerilado como cristal. La textura puede ser todo el fondo, como un campo color papel, o una capa sobre un degradado, que es como se hacen la mayoría de los fondos de degradado de aspecto premium.

Mantén la textura sutil cuando lleve texto encima: lo justo para notarla a distancia de brazo, no tanta que las letras parezcan sucias. La textura de fondo cubre el grano, el papel, la tela y el cristal en detalle, y los degradados con grano explican por qué un poco de ruido hace que el color parezca caro.

Cómo hacer un fondo abstracto con los colores de tu marca

Los mejores fondos abstractos parecen abstractos, pero pertenecen a alguien. Partir de tus propios colores y formas, en lugar de un pack de stock, es lo que lo consigue.

1. 1

   Toma dos o tres colores de marca

   Añade un tono más profundo de la misma familia para dar profundidad. Cómo elegir los colores de marca te ayuda si aún no los tienes.

2. 2

   Elige una familia

   Geométrica si tu marca es precisa o enérgica, fluida si es calmada o premium, texturada si es artesana o cálida.

3. 3

   Toma prestada una forma de la marca

   Una curva del logotipo, el ángulo de una letra, un círculo de un icono. Repetirla en el fondo une ambas cosas.

4. 4

   Planifica la zona tranquila

   Decide dónde irá el texto en cada formato y mantén esa zona uniforme en luminosidad.

5. 5

   Añade la textura al final

   Un grano ligero sobre todo, y compruébalo a tamaño de móvil con palabras reales encima.

Elegir un fondo abstracto según el trabajo

Adapta la abstracción al contenido. Una diapositiva cargada de datos pide un campo fluido tranquilo o tonal. Una publicación de lanzamiento admite un corte geométrico atrevido. Un menú o un producto artesano pide textura. Y elijas lo que elijas, pruébalo al tamaño real con las palabras reales encima, porque los fondos abstractos que quedan preciosos vacíos suelen pelearse con el texto cuando llega.

Los Marks de Gradiently son abstracciones fluidas y texturadas a la vez: colores, hasta tres materiales apilados, luz, grano y movimiento, dibujados en vivo detrás de tu diseño con su zona más tranquila colocada detrás de las palabras. Puedes explorarlos en el Mercado o crear uno en la Forge.