Degradados holográficos e iridiscencia, explicados

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.

Ejemplos de degradados holográficos

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.

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.

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.

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

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 muestran cómo animar degradados con eficiencia.

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

Los acabados holográficos pertenecen a la estética Y2K, 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 calmo y texto oscuro.

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.

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.