Today is the 8th, and although I am a day late, we’re rolling into Weekly Challenge #6 — something a little trippy, a little brain‑melting, and very fun to build.

This week, your mission is to create a CSS‑only optical illusion.

No JavaScript.

No canvas.

Just pure CSS wizardry.

Think of those illusions where your brain goes:

“Wait… is that moving?

Is that rotating?

Is that… even possible?”

Yeah. That.

The Mission

Build an illusion that:

  • looks impossible
  • moves or shifts even when it’s not actually moving
  • tricks the eye using patterns, gradients, shapes, or perspective
  • is powered entirely by CSS

It can be subtle or chaotic — your choice.

The Rules

  • No JavaScript
  • Must visually “trick” the viewer
  • Must use at least one of the following:
    • repeating patterns
    • gradients
    • perspective transforms
    • animation timing illusions
  • Must be interactive or animated
  • Must be shareable in a CodePen or GitHub link

The Goal

Make people stare at it for 10 seconds and go:

“…bro what.”

If someone questions reality for even a moment, you’ve succeeded.

Bonus (if you wanna go wild)

  • Make the illusion change on hover
  • Add a theme (retro, neon, sci‑fi, geometric, etc.)
  • Use only one HTML element
  • Make it look like it’s rotating even though it’s not

Hints (only 3)

🔹 1. Repeating gradients are your best friend

CSS gradients can create wild illusions when repeated or angled just right.

🔹 2. Slow animations feel more “real”

Try easing curves like:

animation-timing-function: cubic-bezier(.25, .1, .25, 1);
Enter fullscreen mode Exit fullscreen mode

It makes movement feel natural — which makes the illusion stronger.

🔹 3. Perspective + transform = instant mind trick

Even a simple:

transform: perspective(400px) rotateX(20deg);
Enter fullscreen mode Exit fullscreen mode

can make flat shapes look 3D.

How to Enter

Just drop your CodePen or GitHub link in the comments.

That’s literally it.

No deadlines, no pressure — just build something cool and share it.

Alright, that’s the challenge

Go make something that breaks people’s brains (in a good way).

Make it weird. Make it trippy. Make it yours.

And if you want a shoutout in next week’s challenge…

you know what to do.