# Fondos abstractos: formas, campos y fluidez

[Canonical HTML page](https://gradiently.design/es/guide/abstract-backgrounds)

Los fondos abstractos transmiten un ambiente sin contar una historia, y por eso están detrás de tantos titulares, diapositivas y páginas de producto. Elegir bien el tipo de abstracción es casi todo el trabajo.

## The short version

- Un fondo abstracto es un fondo hecho de color, forma y textura, y no de una escena u objeto reconocible.
- La mayoría de los fondos abstractos caen en tres tipos: geométricos (bordes duros y patrones), fluidos (mezclas suaves y campos que fluyen) y texturados (grano, ruido y materia).
- Los fondos geométricos transmiten estructura y precisión, los fluidos calma o vida, y los texturados algo físico y artesanal.
- Un fondo abstracto sigue necesitando una zona tranquila y de luminosidad uniforme donde vaya el texto.
- Muchos fondos geométricos y fluidos se pueden construir solo con CSS, con degradados lineales, radiales, cónicos y repetidos.

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](https://gradiently.design/es/guide/types-of-gradients).

## Tres tipos de fondo abstracto

| Tipo | Se construye con | Transmite | Encaja en |
| --- | --- | --- | --- |
| Geométrico | Paradas duras, rayas, cuadrículas, círculos, cuñas | Estructura, precisión, energía | Tecnología, deporte, eventos, maquetaciones editoriales |
| Fluido | Degradados suaves, mallas, resplandores, bandas que fluyen | Calma, vida, un aire premium | Marcas, páginas de producto, bienestar, música |
| Texturado | Grano, ruido, papel, tela, cristal | Algo físico, artesanal, cálido | Artesanía, comida, impresión, moda, todo lo hecho a mano |

Las tres familias. Muchos fondos buenos combinan dos, como un degradado fluido con grano fino.

## 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](https://gradiently.design/es/guide/swiss-design). En CSS, las paradas de color duras (dos colores en la misma posición) crean los bordes.

- Corte diagonal: `linear-gradient(135deg, #0f172a 0% 50%, #f97316 50% 100%)`
- Rayas tonales: `repeating-linear-gradient(45deg, #1e1b4b 0 18px, #312e81 18px 36px)`
- Color en cuartos: `conic-gradient(from 45deg, #f43f5e 0 25%, #f59e0b 0 50%, #10b981 0 75%, #3b82f6 0)`
- Rayos de sol: `repeating-conic-gradient(from 0deg at 50% 100%, #fde68a 0deg 6deg, #fb923c 6deg 12deg)`
- Anillos concéntricos: `repeating-radial-gradient(circle at 50% 50%, #0b132b 0 14px, #1c2541 14px 28px)`
- Tres bandas: `linear-gradient(90deg, #111827 0% 33.3%, #7c3aed 33.3% 66.6%, #f5f3ff 66.6% 100%)`

Seis fondos geométricos, cada uno un solo degradado CSS con paradas duras. Las versiones tonales, como las rayas y los anillos, son lo bastante tranquilas para llevar texto.

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](https://gradiently.design/es/guide/css-patterns) 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.

- Crepúsculo líquido: `radial-gradient(ellipse at 20% 30%, #ff7a59 0%, #c43d7a 40%, #2b1055 100%)`
- Cinta de aurora: `linear-gradient(170deg, #03121f 0%, #0b3b3a 40%, #2dd4bf 55%, #0b3b3a 70%, #03121f 100%)`
- Agua profunda: `radial-gradient(ellipse at 70% 70%, #a5f3fc 0%, #60a5fa 35%, #3730a3 75%, #1e1b4b 100%)`
- Flor pastel: `radial-gradient(circle at 35% 40%, #fef3c7 0%, #fbcfe8 40%, #c4b5fd 80%, #a78bfa 100%)`

Campos fluidos como degradados sueltos. Los fondos fluidos de verdad superponen varios de estos, que es como se construyen los degradados de malla en CSS.

```css
.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%);
}
```

Un fondo fluido a partir de tres resplandores radiales superpuestos sobre una base profunda. Mueve las posiciones de `at` para dirigir dónde se acumula la luz.

Los fondos fluidos vienen en estilos con nombre: los [degradados de malla](https://gradiently.design/es/guide/mesh-gradients) mezclan varios puntos de color sobre una superficie, y los [degradados de aurora](https://gradiently.design/es/guide/aurora-gradients) 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.

Una publicación vertical de estilo revista con un titular sobre un fondo cálido de textura suave

Un campo texturado para una marca artesana: la propia superficie marca el tono.

Un anuncio vertical de lanzamiento con un titular sobre un degradado fluido, liso y frío

Un campo fluido para el lanzamiento de un software: tranquilo, brillante y limpio.

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](https://gradiently.design/es/guide/background-texture) cubre el grano, el papel, la tela y el cristal en detalle, y los [degradados con grano](https://gradiently.design/es/guide/grainy-gradients) 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. **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](https://gradiently.design/es/guide/how-to-choose-brand-colors) te ayuda si aún no los tienes.
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. **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. **Planifica la zona tranquila** Decide dónde irá el texto en cada formato y mantén esa zona uniforme en luminosidad.
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

### Evita

- Patrones de alto contraste detrás del texto del cuerpo
- Tres tipos de abstracción en un mismo diseño
- Formas al azar sin relación con la marca
- Un fondo tan recargado que se convierte en el mensaje

### Haz

- Patrones tonales, o mantén los patrones lejos de las palabras
- Un solo tipo, con la textura como capa de apoyo
- Formas y colores que hagan eco de tu marca
- Un fondo que fija el ambiente y luego se retira

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.

## FAQ

### ¿Qué es un fondo abstracto?

Un fondo hecho de color, forma y textura, y no de una escena reconocible. La mayoría son geométricos, fluidos o texturados, o una combinación.

### ¿Cómo hago un fondo abstracto en CSS?

Usa degradados lineales, cónicos y repetidos con paradas duras para los patrones geométricos, y degradados radiales superpuestos para los campos fluidos. Añade una capa de ruido SVG para la textura.

### ¿Qué fondo abstracto es mejor para llevar texto?

Los fondos fluidos con zonas grandes y uniformes son los más fáciles, seguidos de los patrones geométricos tonales. Evita los patrones de alto contraste detrás de las palabras.

### ¿Qué hace que un fondo abstracto parezca premium?

La contención: una paleta limitada, luz suave, textura fina y una zona tranquila donde va el contenido. La abstracción recargada y de alto contraste suele parecer más barata.