Ilusiones Ópticas CSS: 50+ Ilusiones Visuales Construidas con CSS y HTML Puros
Publicado originalmente por Alvaro Montoro - DEV Community
Puedes encontrar una colección con todas las ilusiones ópticas en este artículo (¡y más!) en CodePen (también en GitHub!). Puedes mover el ratón sobre muchas de las demostraciones a continuación para revelar el efecto o detener las animaciones.
1 - Ilusiones de Poggendorff
La ilusión de Poggendorff es una ilusión óptica en la que una línea diagonal interrumpida por una barra vertical parece desalineada, aunque ambos segmentos sean en realidad continuos.
Una versión simple de este efecto se puede ver en la siguiente demostración. Utilicé los pseudo-elementos ::before y ::after para crear la línea diagonal y la barra vertical, respectivamente.
https://codepen.io/alvaromontoro/pen/JoKJjZJ
El efecto también se puede ver en una versión más elaborada con múltiples líneas diagonales y barras verticales:
https://codepen.io/alvaromontoro/pen/XJKgWyN
Este dibujo se puede lograr fácilmente usando dos gradientes CSS: uno inclinado a 70 grados y otro que consiste en una serie de columnas verticales. Lo apliqué al body, aunque también podría haber usado :root.
Otra variación de esta ilusión es el Arco Poggendorff de Münsterberg, en el que los dos lados de un arco parecen desalineados y parece que no se encontrarán en la parte superior, pero lo hacen (pasa el ratón para verlo).
https://codepen.io/alvaromontoro/pen/ZYOLpJq
2 - Gradientes Inducidos
Las siguientes ilusiones combinan gradientes y colores planos. Sorprendentemente, algunos de los gradientes no existen realmente. Son simplemente barras grises que, cuando se colocan sobre un gradiente, parecen tener gradientes ellas mismas.
Toma la siguiente demostración: las tres barras (dos verticales en los lados y una barra horizontal en el centro) son del mismo tono de gris. El único gradiente real está detrás de ellas, lo que engaña a nuestro cerebro haciéndole creer que las barras son de diferentes colores e incluso contienen gradientes.
https://codepen.io/alvaromontoro/pen/gbMLYqy
Aquí hay otra variación de este efecto. Parece que la línea central tiene un gradiente repetido de grises oscuros y claros, pero en realidad es un color plano. Si pasas el ratón sobre la demostración, la barra se expandirá, dejando claro que no hay gradiente en absoluto.
https://codepen.io/alvaromontoro/pen/emzWzEZ
3 - Ilusión de Cornsweet
Las siguientes ilusiones ópticas comparten una idea común: algunos colores son idénticos, pero no se ven igual. Esto típicamente ocurre cuando regiones del mismo color o brillo están rodeadas por áreas con contraste diferente.
Por ejemplo, en la siguiente demostración, los extremos izquierdo y derecho son del mismo tono de gris. Sin embargo, uno se ve más claro porque está más cerca del blanco, mientras que el otro se ve más oscuro porque está más cerca del negro. Pasa el ratón para revelar que, de hecho, son del mismo color.
https://codepen.io/alvaromontoro/pen/JoKbPQv
4 - Ilusión de White
Ejecuta la siguiente demostración. Verás dos columnas grises en una cuadrícula blanca y negra. Ambas columnas son del mismo tono de gris, pero la que está rodeada de negro parece más oscura que la que está rodeada de blanco.
https://codepen.io/alvaromontoro/pen/ogLYwXP
Codifiqué esta demostración usando mix-blend-mode para poder probar algo un poco diferente. Eso funcionó bien, pero también hizo que fuera más difícil mostrar el efecto al pasar el ratón. En retrospectiva, debería haber planeado eso mejor.
Esta ilusión óptica también funciona con colores. Por ejemplo, estos dos cuadrados parecen ser diferentes tonos de azul, pero son del mismo color. Esta vez, puedes pasar el ratón para revelar el efecto:
https://codepen.io/alvaromontoro/pen/jErMLOK
5 - Anillo de Wertheimer-Koffka
El anillo en la siguiente ilustración tiene el mismo color en todo su perímetro. Sin embargo, un lado está colocado sobre blanco y el otro sobre negro, lo que hace que se vean diferentes. Si pasas el ratón sobre la demostración, la barra roja desaparecerá, dejando más claro que el anillo es un color único y uniforme.
https://codepen.io/alvaromontoro/pen/GgqrpMb
6 - Ilusión de Adelson
Probablemente hayas visto la ilusión que involucra un tablero de ajedrez y un objeto que proyecta una sombra, donde dos fichas (una aparentemente clara y otra aparentemente oscura) resultan ser del mismo color.
Esta demostración sigue el mismo principio. Verás dos fichas etiquetadas A y B. Ambas tienen el mismo tono de gris, pero la mayoría de las personas no pueden notarlo a primera vista (o segunda, o incluso tercera).
https://codepen.io/alvaromontoro/pen/WbxRxvb
7 - Ilusión de Brillo de Asahi
El círculo en el centro de este elemento en forma de flor es del mismo blanco que el resto de la página, pero da la impresión de ser más brillante, como si estuviera emitiendo luz.
https://codepen.io/alvaromontoro/pen/XJKRdvb
8 - Esferas de Color
Esta es una de mis ilusiones favoritas de la colección. Los círculos (o esferas) se ven rojos, azules o verdes, pero en realidad son todos del mismo color grisáceo. Nuestro cerebro los “coloriza” basándose en las líneas que se superponen a las formas. ¿No lo crees? Pasa el ratón sobre la ilustración.
https://codepen.io/alvaromontoro/pen/VYjKryZ
9 - Colores del Contorno
En la siguiente ilustración, las líneas dentro de la sección amarilla parecen azules, mientras que las líneas dentro de la sección azul parecen rojas… pero todas son negras (o gris muy oscuro). El contorno blanco crea la ilusión de color. Pasa el ratón para eliminar el contorno y las líneas aparecerán claramente negras.
https://codepen.io/alvaromontoro/pen/yyJgJKb
10 - Ceguera de Curvatura
Un conjunto de líneas se ve más recto (arriba) mientras que el otro se ve más curvado (abajo). En realidad, ambos conjuntos son igualmente ondulantes. La única diferencia es cómo están coloreados: cambiar el color en los picos hace que las líneas se vean más rectas. Cambiarlo en los puntos de inflexión las hace parecer más curvadas.
El código CSS para las líneas ondulantes se adapta de un fragmento de Temani Afif en CSS-Tricks y su generador de formas ondulantes.
https://codepen.io/alvaromontoro/pen/NPrbNbm
11 - Muro de Café
Esta es una ilusión óptica clásica y fácil de codificar en CSS. Solo se necesitan tres gradientes para generar el efecto en el que las líneas horizontales parecen inclinadas, aunque sean perfectamente paralelas.
https://codepen.io/alvaromontoro/pen/azZmpMr
12 - Triángulo de Penrose
Esta ilusión óptica representa una forma imposible. Las partes que deberían estar al frente aparecen atrás, la parte superior se convierte en la derecha, y todo se siente contradictorio. Codifiqué este hace algún tiempo para el evento Divtober 2024.
https://codepen.io/alvaromontoro/pen/vEKXxEX
13 - Ilusión de Ebbinghaus
¿Cuál círculo naranja es más grande: el de la derecha o el de la izquierda? Es una pregunta con trampa: ambos tienen el mismo tamaño. Sin embargo, tener elementos circundantes más pequeños da la impresión de que uno es más grande.
https://codepen.io/alvaromontoro/pen/myErBdK
También creé una versión animada de esta ilusión (ver abajo), así como otra versión usando una forma cuadrada en lugar de una forma de flor:
https://codepen.io/alvaromontoro/pen/JoKRrYJ
14 - Cuadrado de Kanizsa
Cuando las personas miran esta ilustración, generalmente dicen que ven un cuadrado blanco sobre círculos negros. Sin embargo, el cuadrado no está realmente allí. Las formas de “Pac-Man” crean la ilusión de un cuadrado y una sensación de profundidad. Nuestro cerebro completa la información faltante.
https://codepen.io/alvaromontoro/pen/VYjKzGW
15 - Ilusión de Ehrenstein
No hay círculos ni discos en esta ilustración, solo líneas verticales y horizontales que forman cruces. Nuestro sistema visual completa la forma y nos hace percibir un disco que no existe.
https://codepen.io/alvaromontoro/pen/yyJVJjP
16 - Ilusión de Propagación de Color Neón
Esta ilustración muestra círculos concéntricos, algunos de los cuales tienen un patrón verde y negro. Nuestro cerebro percibe un círculo central con patrón y cuatro círculos concéntricos alrededor de él, debajo del círculo verde.
Hice un poco de trampa al crear esto en CSS, ya que en realidad usé un círculo verde mezclado con los otros fondos.
https://codepen.io/alvaromontoro/pen/ogLYzvv
17 - Ilusiones de Hering y WundtLas ilusiones ópticas basadas en la perspectiva son fascinantes. Incluso cuando sabemos que estamos mirando una imagen plana, nuestro cerebro insiste en interpretar la profundidad.
En la ilusión de Hering, las líneas rojas parecen curvarse hacia afuera, aunque son rectas.
https://codepen.io/alvaromontoro/pen/vEKyKZq
El efecto opuesto es la ilusión de Wundt. Cuando las líneas se expanden desde los lados hacia el centro, las líneas rojas parecen curvarse hacia adentro (este efecto es más sutil).
https://codepen.io/alvaromontoro/pen/RNRgqGZ
18 - Ilusión de Ponzo
Ambas líneas amarillas tienen la misma longitud, pero la superior parece más larga debido a la profundidad percibida y la perspectiva. Intenté un enfoque diferente al codificar esta cuando apliqué una rotación tridimensional en CSS… así que la perspectiva es técnicamente real.
https://codepen.io/alvaromontoro/pen/wBWoeYo
19 - Ilusión T
Esta ilusión es fácil de codificar en CSS y fácil de caer en ella. Tanto las líneas vertical como horizontal tienen la misma longitud, pero la línea vertical parece más larga.
https://codepen.io/alvaromontoro/pen/raLWryY
20 - Ilusión de Müller-Lyer
Una ilusión clásica: las líneas horizontales tienen la misma longitud, pero los bordes que apuntan hacia adentro o hacia afuera cambian dramáticamente cómo las percibimos. Juraría que la superior es más larga. Pero no lo es.
Desde una perspectiva de codificación, cada forma es un pseudo-elemento. Me aseguré de que las líneas horizontales fueran idénticas usando los mismos gradientes y solo reposicionando los bordes en ::before y ::after.
https://codepen.io/alvaromontoro/pen/GgqNqeZ
21 - Ilusión de la Mesa Inclinada
Parece que el rectángulo superior se inclina hacia la izquierda, pero en realidad es paralelo al de abajo. El truco está en la dirección de las líneas diagonales utilizadas para “colorear” cada rectángulo.
Esta ilusión funciona mejor en pantallas más grandes. El efecto disminuye cuando puedes ver la imagen completa.
https://codepen.io/alvaromontoro/pen/ZYOLpLj
22 - Líneas Paralelas
Este es un efecto simple: las líneas negras son paralelas, pero parecen no serlo debido a la dirección de las barras que las cruzan.
Compliqué un poco esto al codificarlo. Inicialmente construí la versión en negro y rojo a continuación e intenté reutilizar más código del que probablemente debería haber.
https://codepen.io/alvaromontoro/pen/yyJVqvo
Aquí está la versión original que creé. El efecto también es visible allí:
https://codepen.io/alvaromontoro/pen/VYjmByN
¡Buenas noticias! Hay más ilusiones ópticas a continuación, pero primero, una advertencia.
ATENCIÓN: Las siguientes ilusiones ópticas son estáticas, pero dan la impresión de movimiento. Procede en consecuencia.
(Dejando algo de espacio en blanco en caso de que no quieras continuar.)
.
.
.
.
.
.
.
.
.
.
.
23 - Agujero Expandiéndose
Esta es una ilusión óptica alucinante. Es completamente estática, pero parece que el agujero negro en el centro se está expandiendo, especialmente cuando no lo miras directamente, creando la sensación de caer en un pozo.
Desde una perspectiva de codificación, esta fue muy simple: un patrón de fondo hecho con dos gradientes radiales, más un pseudo-elemento desenfocado para el agujero “expandiéndose”.
https://codepen.io/alvaromontoro/pen/emzdyBo
24 - Serpientes Giratorias
Esta es una de solo dos ilusiones ópticas en esta colección donde usé elementos HTML en lugar de depender exclusivamente de CSS. Es un efecto clásico: cuando miras la ilustración, los discos periféricos parecen girar, aunque nada se está moviendo realmente.
https://codepen.io/alvaromontoro/pen/JoKbBQz
25 - Puntos Apareciendo
Otra ilusión clásica. Enfócate en los puntos blancos y los puntos adyacentes parecerán volverse negros. No hay animación, no hay transición, y nada dinámico. Solo líneas que se cruzan y pequeños círculos blancos, pero parece movimiento.
https://codepen.io/alvaromontoro/pen/LEZROaP
26 - Puntos Desapareciendo
Este patrón consiste en puntos negros y blancos repetidos en toda la página. Si te enfocas en un punto, los otros comenzarán a desaparecer. Al principio puede suceder por fila o columna, pero después de poco tiempo, la mayoría desaparecen.
Si no ves el efecto inmediatamente, intenta enfocarte en un punto negro. Pasa el ratón sobre él, espera unos segundos mientras mantienes tu enfoque, y luego retira el ratón.
https://codepen.io/alvaromontoro/pen/xbOELPZ
27 - Ilusión de Ouchi
Esta es una imagen estática, pero da la impresión de que el patrón dentro del círculo se está moviendo lateralmente. Esto sucede porque nuestros ojos están constantemente haciendo pequeños movimientos, incluso cuando no somos conscientes de ello.
Si no puedes ver la ilusión, intenta mover ligeramente la pantalla (o tu cabeza) mientras miras justo fuera del círculo.
https://codepen.io/alvaromontoro/pen/wBWzJwP
28 - Oscilación de Líneas Punteadas Ortogonales
Cuando miras alrededor de este patrón, el área central parece deslizarse y oscilar, aunque es completamente estática. Esta ilusión me marea… pero eso también puede ser porque tuve que mirarla fijamente durante mucho tiempo mientras la codificaba.
https://codepen.io/alvaromontoro/pen/gbMgPzW
29 - Enigma
Esta ilusión es particularmente interesante. Hay un círculo rosa rodeado por anillos concéntricos rosa y púrpura. Si te enfocas en el círculo rosa, los anillos parecen girar o centellear, como si hubiera alguna actividad en ellos. Por supuesto, nada se está moviendo realmente.
https://codepen.io/alvaromontoro/pen/RNRKexx
30 - Olas
Esta demostración fue desafiante de codificar y tarda mucho en cargarse. Principalmente porque utiliza una gran cantidad de gradientes cónicos detrás de escenas, que los navegadores luchan por renderizar eficientemente. Probablemente hay una mejor manera de implementarlo, pero aún no lo he explorado.
Si miras de cerca la ilustración, puedes notar movimiento ondulante. Como con las ilusiones anteriores en esta sección, la imagen es completamente estática.
https://codepen.io/alvaromontoro/pen/JoKWKQa
¡Buenas noticias! Hay más ilusiones ópticas a continuación, pero primero, otra advertencia.
ATENCIÓN: Las siguientes ilusiones ópticas se mueven realmente, y la ilusión se crea por el movimiento en sí. Algunas de ellas pueden ser vertiginosas, así que procede en consecuencia.
(Dejando algo de espacio en blanco en caso de que no quieras continuar.)
.
.
.
.
.
.
.
.
.
.
31 - Ilusión de Ebbinghaus Animada
Anteriormente, vimos dos versiones estáticas de la ilusión de Ebbinghaus. Esta está animada. Los elementos se mueven de lado a lado, y las formas circundantes crecen y se encogen, dando la impresión de que el círculo naranja está cambiando de tamaño, cuando definitivamente no lo está.
https://codepen.io/alvaromontoro/pen/vEKXewP
32 - Torre Psicocinética
Esto parece una torre tridimensional girando en el espacio, vista desde arriba. En realidad, es una imagen plana y bidimensional que rota.
Pasa el ratón sobre la demostración para detener la rotación y la ilusión de profundidad desaparece completamente.
https://codepen.io/alvaromontoro/pen/dPXNMWR
33 - Abanico de Colores
Esta ilusión óptica requiere solo dos gradientes: un gradiente cónico para los brazos en forma de abanico y un gradiente radial para los círculos y discos.
Si te enfocas en el punto negro, la ilustración puede parecer desarrollar un borde más oscuro verdoso o marrón. Sin embargo, los colores nunca cambian.
https://codepen.io/alvaromontoro/pen/bNeWbqL
34 - Ilusión de Radios Invertidos
Esta ilusión es encantadora y desorientadora. Mientras los colores de fondo de la rueda están girando, los radios permanecen fijos. Sin embargo, parecen girar en la dirección opuesta. En realidad, solo el fondo se está moviendo.
https://codepen.io/alvaromontoro/pen/RNRpXYP
35 - Vinculación de Movimiento
¿Qué ves en esta animación? La mayoría de las personas reportan dos conjuntos de líneas operando independientemente: una moviéndose horizontalmente y otra moviéndose verticalmente. Y eso es exactamente cómo se ve.
En realidad, es una sola forma moviéndose uniformemente. Ejecuta la demostración, pasa el ratón sobre las líneas, y el verdadero movimiento será revelado.
https://codepen.io/alvaromontoro/pen/ByzpqdP
36 - Ilusión de Mainz-Linez
Enfócate en uno de los puntos rojos. Notarás que se mueve recto hacia arriba y hacia abajo a lo largo de una ruta vertical. Ahora cambia tu enfoque a una de las cruces negras en el centro. De repente, los puntos rojos parecen zigzaguear en lugar de moverse recto.El código CSS para las líneas ondulantes se adapta de un fragmento de Temani Afif en CSS-Tricks y su generador de formas ondulantes.
https://codepen.io/alvaromontoro/pen/gbMgwar
37 - Colores Tambaleantes
Puede parecer que las cajas se mueven a diferentes velocidades o como un conjunto de pies caminando. En realidad, todos los elementos se mueven al mismo ritmo y en paralelo. Pasa el ratón sobre la demostración para revelar el efecto.
https://codepen.io/alvaromontoro/pen/emzdvpX
La ilusión también funciona cuando los “pies” se mueven en círculos, como se muestra en esta versión alternativa:
https://codepen.io/alvaromontoro/pen/raLjEPY
38 - Movimiento de Línea Punteada
Sigue el punto rojo mientras se mueve hacia los lados. Desde la esquina de tu visión, puede parecer que las líneas punteadas en blanco y negro se están acercando (cuando el punto se mueve hacia la izquierda) o alejando (cuando se mueve hacia la derecha). En realidad, las líneas son completamente estáticas.
https://codepen.io/alvaromontoro/pen/ZYOLWob
39 - Asincronía de Contraste
Estos puntos siempre tienen el mismo color. Sin embargo, cuando se colocan contra fondos alternados, parecen saltar o moverse fuera de sincronización debido a cómo se mezclan con su entorno.
Pasa el ratón sobre la demostración para eliminar el fondo y la ilusión desaparece.
https://codepen.io/alvaromontoro/pen/EayZKOZ
40 - Cuadrado Respirante
Esta ilusión da la impresión de que un cuadrado azul está creciendo y encogiéndose rítmicamente, casi como si estuviera respirando o latiendo como un corazón.
Aunque la imagen está rotando, su tamaño nunca cambia. Pasa el ratón sobre la ilustración para eliminar las cajas verdes y revelar el cuadrado azul rotativo.
https://codepen.io/alvaromontoro/pen/pvbErNQ
41 - Desvanecimiento de Troxler
Esta ilustración muestra un círculo hecho de puntos rosas, con un punto faltante. Enfócate en la cruz en el centro y el punto faltante aparecerá como un punto amarillo o verde, dando la impresión de que está “comiendo” los puntos rosas. Justo como Pac-Man.
Podría haber utilizado funciones trigonométricas CSS para calcular las posiciones exactas de los puntos, pero como nunca cambian, elegí codificar los valores en su lugar.
https://codepen.io/alvaromontoro/pen/zxBoqGq
Aquí hay un efecto relacionado. Sigue el círculo gris claro mientras gira, y los círculos más oscuros parecerán cambiar de gris a verdoso. Enfócate en la cruz en el centro, y después de un corto tiempo, los círculos más oscuros pueden comenzar a desvanecerse por completo.
https://codepen.io/alvaromontoro/pen/GgqNBpL
42 - Ilusión de Pinna-Brelstaff
Esta ilusión es particularmente vertiginosa. Sigue el punto azulado mientras se mueve de derecha a izquierda y viceversa. Parecerá como si partes del fondo en mosaico se estuvieran desplazando, aunque sean estáticas. El único elemento que se mueve es el punto.
Desde una perspectiva CSS, codifiqué el patrón usando gradientes cónicos y lo apliqué a los pseudoelementos ::before y ::after. Luego volteé uno al revés y lo recorté.
https://codepen.io/alvaromontoro/pen/NPrbLPg
43 - Empalizada
Los radios de una rueda, cuando se ven a través de una empalizada, parecen curvarse. En realidad, son perfectamente rectos. Pasa el ratón sobre la demostración para eliminar la empalizada y verás que los radios nunca se doblan.
https://codepen.io/alvaromontoro/pen/WbxogJJ
44 - Movimiento Alternativo
Esta animación demuestra cómo nuestras mentes infieren movimiento que puede no estar realmente presente. Considera los dos puntos azules. Diferentes personas perciben diferentes movimientos: de lado a lado, de arriba a abajo, o incluso movimiento circular.
Cubre el lado derecho de la animación para que veas solo un punto a la vez. El movimiento ahora parece vertical. Cubre la parte inferior en su lugar, y el movimiento parece horizontal. Este es nuestro cerebro intentando completar el movimiento.
https://codepen.io/alvaromontoro/pen/JoKEXER
45 - Inversión de Movimiento
Estas dos ilustraciones son idénticas - las mismas formas, la misma animación. La única diferencia es la función de temporización CSS.
La animación superior se mueve suavemente de derecha a izquierda. La inferior parece moverse de manera entrecortada en la misma dirección, pero si te enfocas en ella, puede parecer repentinamente que se invierte la dirección y se mueve más rápido.
https://codepen.io/alvaromontoro/pen/MYeoXvX
La mayoría de la inspiración para estas ilusiones ópticas provino de dos excelentes recursos:
- “35 ilusiones ópticas y por qué engañan a tu cerebro” de Patrick Pester.
- “154 Fenómenos Visuales e Ilusiones Ópticas” con explicaciones de Michael Bach
Si tienes preguntas sobre cómo se codificó cualquiera de estas ilusiones, deja un comentario e haré mi mejor esfuerzo para responder.