La versión corta
- Un degradado iridiscente mezcla varios tintes pálidos muy próximos, normalmente lila, menta, rosa empolvado, cielo y crema, de modo que la superficie parece cambiar de color al recorrerla con la vista.
- La iridiscencia se diferencia del diseño holográfico en la intensidad: lo holográfico recorre todo el arcoíris con alta saturación, mientras que lo iridiscente se mantiene suave, pálido y casi neutro.
- El efecto nacarado viene de una base clara, poca saturación, un brillo blanco y tintes que están uno junto a otro en la rueda cromática.
- La iridiscencia oscura, como una mancha de aceite o el caparazón de un escarabajo, usa la misma idea sobre un fondo casi negro con turquesa profundo, violeta y bronce.
- El texto sobre un fondo iridiscente necesita una zona tranquila y uniforme detrás, porque los tintes pálidos cambiantes dan poco contraste al texto claro y un contraste inquieto al texto oscuro.
En esta página
Un degradado iridiscente es una mezcla de tintes pálidos muy próximos, típicamente lila, menta, rosa empolvado, azul cielo y un crema cálido, sobre una base clara con un suave brillo blanco. El efecto imita cosas iridiscentes reales: perlas, pompas de jabón, el interior de una concha de abulón. Los colores son delicados y cambian poco a poco por la superficie, así que se lee como un brillo y no como una franja de color. Los códigos de abajo están listos para pegar en CSS o en cualquier herramienta de diseño que acepte hex.
Códigos de degradado iridiscente
Cada uno parte de un casi blanco o un casi negro y añade tintes vecinos entre sí. Copia uno tal cual, o cambia una sola parada para hacerlo tuyo.
Fíjate en lo que tienen en común las claras: ninguna parada está totalmente saturada y el punto más claro es blanco puro o casi puro. Lleva cualquier parada a un color fuerte y la perla se convierte en un degradado pastel o, más aún, en un arcoíris.
Iridiscente frente a holográfico
La gente suele usar las dos palabras para lo mismo, pero en diseño describen aspectos distintos. Lo holográfico imita las pegatinas de lámina y los hologramas de las tarjetas de crédito: todos los tonos, alta saturación, bandas duras. Lo iridiscente imita superficies naturales que cambian de color con discreción. Si quieres la versión más ruidosa, degradados holográficos la trata por completo.
Iridiscente
Holográfico
Holográfico
Iridiscente
Holográfico
Iridiscente
Holográfico
Holográfico
Cómo construir un degradado iridiscente desde cero
- 1
Elige la base
La iridiscencia clara parte del blanco o de un blanco roto ligeramente cálido como
#fbf9f6. La iridiscencia oscura parte de un negro azulado como#0d0f1a. La base debe cubrir un tercio o más de la superficie. - 2
Elige de tres a cinco tintes vecinos
Recorre la rueda cromática en pasos pequeños: de lila a cielo, a menta, a crema, a rosa empolvado. Mantenlos con una luminosidad parecida, para que ninguno salte al frente.
- 3
Baja la saturación
Si un tinte parece un color al que podrías poner nombre desde el otro lado de la sala, es demasiado fuerte. En las versiones claras, busca tintes que sean sobre todo blancos con un rastro de tono.
- 4
Añade un brillo
Un pequeño punto radial blanco, desplazado hacia una esquina, le dice al ojo de dónde viene la luz. Uno basta; dos empiezan a parecer un botón brillante.
- 5
Termina con grano fino
Las mezclas pálidas forman bandas con facilidad en pantalla. Un poco de ruido rompe los escalones, algo que bandas en los degradados explica con la solución.
El paso que más importa es el tercero. La mayoría de los diseños iridiscentes que fallan son sencillamente demasiado coloridos. La perla real es abrumadoramente blanca; el color es algo que notas en segundo lugar.
CSS iridiscente con cambio de color al pasar el cursor
En la web puedes hacer que el brillo se mueva cuando alguien apunta a él, que es lo único que hace una perla impresa y no puede hacer una imagen plana. Registrar el ángulo con @property permite al navegador animarlo con suavidad; los navegadores sin soporte simplemente muestran el estado de reposo. La página de MDN sobre @property tiene los detalles.
@property --sheen {
syntax: '<angle>';
inherits: false;
initial-value: 120deg;
}
.pearl {
background:
radial-gradient(ellipse at 25% 15%, rgb(255 255 255 / 0.9), transparent 45%),
linear-gradient(var(--sheen), #f6f1ff, #dff3f4 30%, #fbe7f0 55%, #fff6e0 75%, #e9e4ff);
color: #3d3a4a;
transition: --sheen 700ms ease;
}
.pearl:hover {
--sheen: 210deg;
}
@media (prefers-reduced-motion: reduce) {
.pearl { transition: none; }
}Girar el ángulo es más suave que desplazar la posición del fondo, porque los tintes se quedan en su sitio y solo cambia su dirección, lo que se parece más a cómo capta la luz una superficie real. Para mezclas más uniformes, ayuda definir las paradas en OKLCH; mira degradados OKLCH en CSS.
Poner palabras sobre un fondo iridiscente
La iridiscencia pálida es una superficie difícil para el texto. El texto blanco desaparece sobre ella, y el texto oscuro solo funciona si la zona de detrás es uniforme. Usa una tinta oscura tomada de la paleta y no negro puro, mantén las palabras sobre la parte más tranquila de la mezcla y deja el cambio más movido en una esquina. Las reglas generales están en texto sobre un fondo con degradado.
Las palabras colocadas directamente sobre los tintes cambiantes pierden sus bordes donde el brillo es más intenso.
Con la región más tranquila detrás del titular y el cambio de color apartado, la misma publicación se lee de un vistazo.
Aquí es donde un Mark de Gradiently se gana el sueldo. Un Mark sabe dónde están las palabras: mueve su región más tranquila detrás de ellas y la tinta automática elige texto claro u oscuro línea a línea a partir de la propia paleta del Mark, de modo que una superficie nacarada y suave sigue siendo legible en cada tamaño sin cajas ni sombras.
Dónde funciona mejor la iridiscencia
- Cuidado de la piel y belleza: publicaciones de lanzamiento, cartas de tonos y pegatinas de packaging. Sugiere rocío y luz sobre la piel; mira diseño de marcas de cuidado de la piel.
- Novias y bodas: invitaciones y save the dates sobre perla, con tinta grafito y márgenes generosos.
- Joyería: un fondo perla u ópalo detrás de las fotos de producto resalta las piedras sin competir con ellas.
- Música y vida nocturna: la mezcla oscura de mancha de aceite en una historia de 1080×1920, con una línea de texto blanco sobre la zona más oscura.
- Páginas de producto tecnológico: una cabecera perla con el brillo al pasar el cursor de arriba, detrás de un titular corto.
La iridiscencia combina bien con tipografías serif limpias o sans ligeras y un espaciado amplio. Choca con las sombras proyectadas pesadas, los contornos gruesos y los acentos saturados. Si quieres metal en lugar de perla, el efecto cromado es el hermano más duro y frío.
Preguntas frecuentes
¿Qué colores forman un degradado iridiscente?
Lila pálido, menta, azul cielo, rosa empolvado y crema sobre una base blanca, más un suave brillo blanco. Para una versión oscura, turquesa profundo, violeta y bronce sobre un negro azulado.
¿Qué diferencia hay entre iridiscente y holográfico?
Lo iridiscente es suave y pálido, como una perla o una pompa de jabón. Lo holográfico recorre todo el arcoíris con alta saturación, como las pegatinas de lámina.
¿Cómo hago un efecto iridiscente en CSS?
Superpón un brillo radial blanco a un degradado lineal de tintes pálidos vecinos. Para que cambie, registra un ángulo con @property y cámbialo al pasar el cursor.
¿Es lo mismo nacarado que iridiscente?
Lo nacarado es un tipo de iridiscencia: sobre todo blanco con un leve cambio de color. Lo iridiscente también abarca cambios más oscuros como el aceite sobre el agua o el caparazón de un escarabajo.
¿Qué color de fuente funciona sobre un fondo iridiscente?
Una tinta oscura de la paleta, como un grafito con un toque de violeta, colocada sobre la zona más tranquila. El texto blanco rara vez se lee sobre una iridiscencia pálida.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil