# Degradados holográficos e iridiscencia, explicados

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

El papel holográfico, las pompas de jabón y la perla cambian de color al moverte. Una pantalla plana no puede hacerlo, pero un degradado bien construido puede convencer al ojo de que sí.

## The short version

- Un degradado holográfico imita materiales que cambian de color según el ángulo de visión, como el papel holográfico, las pompas de jabón y la madreperla.
- La iridiscencia real viene de la luz que interfiere en capas finas o se dispersa en crestas diminutas, y por eso los colores cambian en orden de arcoíris al moverte.
- En pantalla, un degradado cónico de tonos arcoíris pálidos más un brillo blanco en movimiento es la forma más convincente de imitarlo.
- Los degradados holográficos quedan mejor en tonos pálidos y nacarados con un reflejo brillante, y no en colores arcoíris totalmente saturados.
- Los efectos holográficos funcionan como acento en una tarjeta, una pegatina o la superficie de un producto, y cansan pronto cuando lo cubren todo.

Un **degradado holográfico** es un degradado que imita materiales iridiscentes, como el papel holográfico, las pompas de jabón, el aceite sobre el agua o la madreperla, cuyo color cambia al moverlos. En pantalla eso significa tonos arcoíris pálidos que fluyen unos hacia otros, normalmente con un brillo blanco intenso que cruza la superficie. Los mejores se sienten como un material que atrapa la luz; los peores parecen una pegatina de arcoíris de clipart. La diferencia es casi solo contención.

## Qué hace que algo sea iridiscente

La iridiscencia es un color que depende del ángulo desde el que miras. En una pompa de jabón o en una mancha de aceite, la luz se refleja en la parte superior y en la inferior de una película muy fina, y los dos reflejos interfieren, reforzando unos colores y anulando otros. En el papel holográfico y en el reverso de un CD, unas crestas microscópicas dividen la luz en sus colores, como un prisma. En ambos casos el resultado es el mismo para el ojo: colores en orden de arcoíris que se deslizan por la superficie al inclinarla.

| Aspecto | Qué se ve | Cómo imitarlo |
| --- | --- | --- |
| Papel holográfico | Bandas nítidas de colores del arcoíris que saltan con el ángulo | Degradados cónicos o de rayas con brillos definidos |
| Iridiscente | Cambios suaves de arcoíris sobre una superficie lisa | Degradados cónicos o de malla pálidos, brillo lento |
| Nacarado | Casi todo blanco con leves toques de rosa, azul y verde | Degradado radial casi blanco con bordes teñidos |
| Mancha de aceite | Colores de arcoíris que se arremolinan sobre una superficie oscura | Fondo oscuro con bandas de arcoíris apagadas |
| Cromo | Bandas de espejo grises, sin arcoíris | Bandas duras claras y oscuras en grises |

Cinco acabados relacionados. El holográfico y el iridiscente son los de arcoíris; el nacarado y el cromo son sus primos más callados.

## Ejemplos de degradados holográficos

- Foil cónico: `conic-gradient(from 210deg at 50% 50%, #ffd6f5, #d9c8ff, #bfe9ff, #c9ffe6, #fff4c2, #ffd6f5)`
- Iridiscencia lineal: `linear-gradient(120deg, #ffd1f0 0%, #c7d2fe 25%, #a5f3fc 50%, #bbf7d0 70%, #fef9c3 85%, #fbcfe8 100%)`
- Perla: `radial-gradient(ellipse at 30% 25%, #ffffff 0%, #f5eefc 30%, #dfe7f5 60%, #e9dff2 100%)`
- Mancha de aceite: `linear-gradient(135deg, #1b1033 0%, #3b2a7a 30%, #1f6f78 55%, #7a5a1f 75%, #3a1a4a 100%)`
- Cromo: `linear-gradient(180deg, #f8fafc 0%, #cbd5e1 35%, #64748b 50%, #e2e8f0 65%, #94a3b8 100%)`
- Rayas de foil: `repeating-linear-gradient(115deg, #fbcfe8 0px, #c7d2fe 40px, #a5f3fc 80px, #bbf7d0 120px, #fbcfe8 160px)`

Seis acabados como valores CSS únicos. Fíjate en lo pálidos que son los colores del arcoíris: eso es lo que hace que se lean como foil y no como una bandera.

## Por qué funcionan tan bien los degradados cónicos

Un degradado cónico cambia de color al recorrer un punto, así que sus tonos se abren en abanico desde un centro, como la luz que se dispersa en un foil curvo. Si pones el centro fuera del borde de la forma, el abanico se convierte en suaves bandas diagonales. Si cambias el ángulo `from`, todos los colores se deslizan, que es justo lo que hace la iridiscencia al inclinarla. Los detalles de la sintaxis están en los [degradados cónicos](https://gradiently.design/es/guide/conic-gradient).

- Destello rosa: #ffd6f5
- Lila: #d9c8ff
- Azul hielo: #bfe9ff
- Menta: #c9ffe6
- Mantequilla: #fff4c2
- Brillo: #ffffff

Una paleta holográfica es un arcoíris pálido en orden, más blanco. Saltarse pasos o barajar el orden rompe la ilusión.

Mantén todos los tonos con una luminosidad parecida y alta. El foil real refleja mucha luz, así que sus colores son brillantes y ligeramente lavados con blanco. Si un color es mucho más oscuro o saturado que el resto, se lee como una franja de pintura y no como un reflejo. Los colores pálidos también perdonan: no se vuelven grises donde se encuentran, porque todos están muy cerca del blanco.

> **Dónde está la luz** Decide de dónde viene la luz y pon ahí el brillo más intenso. Una superficie holográfica con su reflejo en el sitio equivocado se ve plana, por buenos que sean sus colores.

## Cómo hacer un efecto holográfico en CSS

Dos capas hacen casi todo el trabajo: un arcoíris cónico pálido debajo y una franja estrecha de blanco encima que se desplaza cuando pasas el cursor por el elemento, como la luz deslizándose por un foil. Mantén el movimiento lento y desactívalo para quienes prefieren el movimiento reducido.

```css
.holo {
  background-image:
    linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 0.6) 50%, transparent 65%),
    conic-gradient(from 210deg at 50% 50%, #ffd6f5, #d9c8ff, #bfe9ff, #c9ffe6, #fff4c2, #ffd6f5);
  background-size: 250% 100%, 100% 100%;
  background-position: 100% 0, 0 0;
  transition: background-position 0.9s ease;
  border-radius: 20px;
}

.holo:hover {
  background-position: 0% 0, 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .holo { transition: none; }
}
```

Un foil cónico pálido con un brillo blanco que lo barre al pasar el cursor. La capa del brillo mide un 250 % de ancho para poder desplazarse.

Para más realismo, añade un grano muy fino sobre toda la superficie y deja que un segundo brillo, más tenue, corra en otro ángulo. Si quieres que todo el fondo derive por sí solo, los [fondos de degradado animados](https://gradiently.design/es/guide/animated-gradient-background) muestran cómo animar degradados con eficiencia.

## Cómo mantener el buen gusto en los degradados holográficos

### Clipart

- Colores de arcoíris totalmente saturados
- Efecto holográfico en todas las superficies
- Foil cargado detrás de texto corrido
- Un destello rápido y constante

### Material

- Tonos pálidos y nacarados en orden de arcoíris
- Un solo objeto holográfico: una tarjeta, una insignia, un producto
- Un fondo sólido o calmo detrás de las palabras
- Un brillo lento que se mueve cuando ocurre algo

Los acabados holográficos pertenecen a la [estética Y2K](https://gradiently.design/es/guide/y2k-aesthetic), a los envases de belleza, a las cartas coleccionables, a la ropa de festival y a los accesorios tecnológicos. En una marca, trata el efecto como el foil de una caja impresa: usado en un solo lugar, señala algo especial. Combínalo con mucho blanco o con un [fondo pastel](https://gradiently.design/es/guide/pastel-gradients) calmo y texto oscuro.

Un post de lanzamiento de producto que anuncia una edición limitada en foil sobre un degradado suave y pálido

El anuncio de un lanzamiento es un lugar natural para una superficie pálida y cambiante: el propio acabado dice edición limitada.

## Holográfico en impresión y envases

Ninguna combinación de tintas normales puede reproducir la iridiscencia real, porque la tinta impresa no cambia con el ángulo. Un degradado holográfico impreso se verá como un arcoíris pálido, que puede quedar precioso, pero para lo auténtico necesitas foil holográfico o película iridiscente de tu impresor. Si diseñas para ambos, mantén pálida y sencilla la versión de pantalla para que la impresa no decepcione; mira los [degradados para impresión](https://gradiently.design/es/guide/print-gradients).

Puedes encontrar Marks pálidos y nacarados en el Mercado buscando palabras de color como «perla» o «lila iridiscente», y diseñar con ellos a cualquier tamaño.

## FAQ

### ¿Qué es un degradado holográfico?

Un degradado holográfico imita materiales iridiscentes como el foil, las pompas de jabón y la perla, con tonos arcoíris pálidos en orden y un brillo intenso.

### ¿Cuál es la diferencia entre holográfico e iridiscente?

El foil holográfico muestra bandas de arcoíris más nítidas y que saltan; las superficies iridiscentes muestran cambios de color más suaves y continuos. Ambos cambian con el ángulo de visión.

### ¿Cómo hago un efecto holográfico en CSS?

Usa un `conic-gradient` pálido de tonos arcoíris y superpón encima un brillo `linear-gradient` blanco en movimiento, animado al pasar el cursor o al desplazarse.

### ¿Qué colores forman un degradado holográfico?

Rosa pálido, lila, azul hielo, menta y amarillo mantequilla, en orden de arcoíris, más blanco para el brillo.

### ¿Se puede imprimir un degradado holográfico?

La tinta sola solo puede imprimir un arcoíris pálido. Para un acabado holográfico auténtico, pregunta a tu impresor por el foil holográfico o la película iridiscente.