Forem: Alvaro Montoro

Sharing CodePen 2.0 demos on DEV

Alvaro Montoro — Tue, 07 Apr 2026 01:39:10 +0000

If you've tried the new CodePen 2.0 editor, you may have noticed that the URL format has changed. And if you've tried sharing one of these demos here on DEV, you've probably also noticed that it doesn't work with the standard CodePen embed code:

{% codepen https://codepen.io/editor/alvaromontoro/pen/019d657e-d7bc-746a-9bc3-4df2244c97cc/24ac30a5aad27b2b927702d3557c6e70 %}

If you try adding that code to a DEV article, you'll get this error:

So, the new URL doesn't work yet... but what if you still want to include it in a DEV article? Good news: you can! You just need to use the hash for the CodePen demo instead. Here's how to find it:

Click on the Share icon in the top-right corner
Select "Embed"
A modal will open, make sure "HTML (recommended)" is selected
In the code, look for data-slug-hash and data-user
Copy those values.
Use them to generate a classic CodePen URL in the embed tag:
```
{% codepen https://codepen.io/[USER]/pen/[SLUGH_HASH] %}
```
That's it!

In the screenshot above, the hash is "MYjBBrm" and the user is "alvaromontoro", that makes the URL https://codepen.io/alvaromontoro/pen/MYjBBrm, so the embed tag becomes:

{% codepen https://codepen.io/alvaromontoro/pen/MYjBBrm %}

Which works just fine (it will only show the preview, not the code):

To be fair, I expect the DEV team to fix this soon. But in the meantime, this is a simple workaround for sharing CodePen 2.0 demos.

10 Cool CodePen Demos (March 2026)

Alvaro Montoro — Sat, 04 Apr 2026 00:43:42 +0000

2026 F1 Drivers Custom Select using appearance: base-select

Chris Bolson crafted one of the most impressive custom selects that I have seen so far (and by far). It doesn't even look like a native HTML select. The whole UX is so smooth and clean... you have to try it!

Select your Fruit!

Another custom select, this time coded by Temani Afif. It also doesn't look like your typical select control (far from it), but this one falls in a more playful and fun side. Shoot the fruit to explode it make your selection. A nice experiment and a must try, too.

Demo of lighter operator in SVGFECompositeElement

Safari has a great team coding the browser and sharing updates with the new features. Recently, Safari included support for the feComposite element and Jen Simmons created this demo to showcase how it works. (Without that property, there wouldn't be a glow around the circles.)

Neon Iridescent Ribbon using P5

A relaxing animation with a colorful ribbon or lace moving around the screen. Margarita did a nice job with this demo that can be helpful to learn P5.js: update the different settings on top and check how the demo changes.

Untitled

As part of the "opposite directions" CodePen challenge, Shivani coded this entertaining animation. Two teams of figures (Cyan and Magenta) clash in the center as they try to reach the opposite corner. It was fun looking at the characters move and try to guess which team would win each time.

CSS `position: sticky` for Single Axis Scroll Containers

If you have ever worked with large data tables, you may know what a pain in the neck it is to keep header or columns sticky to help visualize the information. Luckily that may change soon! Bramus showcases a new feature that has landed on Chrome Canary that simplifies that experience in large tables.

CodePen TV - 100% Pure CSS

Every time that Ben Evans shares CSS Art, you know it is going to be amazing. And he didn't disappoint with this TV set coded exclusively with HTML and CSS. The illustration is interactive, so go ahead, explore it, and play with all the buttons!

using `sibling-index()` to hue-shift / increment `opacity` in `svg` `path`s

The title is really descriptive in this illustration by Many Nicole. The colors in the SVG changing by using relative colors and the new sibling-index() function to update the hue of the different lines that form this blob.

The CSS if() Function

Rob created a tutorial about the if() function in CSS that allows to create inline conditional in a website styles. Learn, see the demos, and the test your knowledge at the end. A great resource to learn about CSS.

Gekke zoom dingen

As the title indicates, this is a "crazy" zoom demo by Cyd Stumpel. Combining scroll-driven animations with zoom with scale, the effect is really nice and looks cool like a parallax, but different. A great idea, that I may steal borrow for some projects.

CSS in City

Alvaro Montoro — Tue, 31 Mar 2026 13:25:41 +0000

The illustration of the city above is all CSS. There are no images, no SVG, no JavaScript... there isn’t even any HTML!*

Here’s the source code on CodePen:

(Click on the 1x, 0.5x, and 0.25x buttons to zoom in or out and see more of the illustration. Alternatively, you can also visit the CodePen details page, where you can zoom in/out and resize the window for better results)

You may ask “how did you do it?” And the answer will be “with a lot of patience.” I started this CSS Art two years ago, and worked adding small things little by little: a building here, some tree there, a bus stop close by... But, due to personal and professional reasons, I stopped adding things around a year ago, and haven’t touched the code since. I’d love to expand it into a full city someday.

Basically, it is all a big collection of CSS gradients: radial, linear, conic... I event used the repeating ones. All of them sized and positioned so they fit within a particular spot in the illustration.

This drawing is different from other CSS Art I usually do. I tend to do small things that are responsive, but this is an infinite drawing and it uses absolute units.

It is infinite because it doesn’t matter how much you resize, the illustration just goes on and on. This was achieved by playing with background sizes and positioning, so the same elements repeat ad infinitum. Examples of these elements are:

The bricks on the wall
The tree tops behind the wall
The grayed buildings in the very background
The park houses

The absolute units are pixels, and I used that instead of vmin or em, to make sure that all the things will fall exactly in the place I wanted them to be. When using relative units, sometimes something will fall in a half a pixel position and the result looks off.

When drawing and adding elements, I started from the bottom center of the image, and position everything based on that point, growing from there upwards and sideways.

I added some basic animations (but commented them for performance while coding, you can uncomment the code, but it’s not much), so the traffic light actually works, the water in the fountain flows (poorly) or some of the lights flicker. I considered adding a car that stops at the traffic light and an UFO that flies above the city –that won’t be seen unless you zoom out considerably or have a large/tall screen.

And all this using just the :root element. I could still use the ::before or ::after pseudo-elements to do add more things. In particular, animated things. But I dropped the idea because adding them caused the performance to drop considerably. Still, I would like to continue adding more things when I have time.

What do you think? Have you ever done a single div CSS Art?

*The CodePen demo may not show any HTML, but it automatically adds a structure that is hidden from view but can be seen reviewing the source code. There is a way to run CSS on the browser without the need to import it from HTML. Unfortunately, it requires updating some settings in the web server, and only one browser supported it last time I checked (Firefox). If we did this, the illustration would be completely CSS only.

10 Cool CodePen Demos (February 2026)

Alvaro Montoro — Sun, 01 Mar 2026 18:50:34 +0000

Color Fan Deck

As part of the colors CodePen challenge, Mads Stoumann, created some HTML+CSS color swatches, showcasing different shades and formats. This demo looks better in larger screens, click on the color name at the top to highlight each swatch.

double-helix doodle 3

One of Scott R McGann's pens with shaders and 3D effects. An object at the center of the scene, surrounded by an image wrapped in a way that provides a 360 degree illusion. Really impressive. I could see something like it being used for product demos.

Scroll Driven Tri-Gyro

Adam Argyle shared this gyroscope that spins in different angles and spaces, and changes size as you scroll the page. The smaller color triangles at the top help helps keep track of each triangle... and all in CSS with really clean HTML. Great for learning. This demo will not work on Firefox.

Birds Follow Cursor with 3D Sound - Three.js

This flock of birds will follow your mouse around the screen. Maybe something you've seen many times, but Sabo Sugi's code is well organized and commented, and it can be illustrating (and fun) playing with the setting values and see how the particles change.

My type? Someone who doesn�t disappear after the first commit.

February is the Valentine's Day month, and NANOUU created a web game perfect for the occasion... or kind of. Use the keyboard arrows to move left and right, avoid the hearts, aim for the computers, and find your couple by committing your code. The game doesn't use images, only emojis and text.

Winter Olympics Blizzard

Inspired by a Jon Kantner's demo, and in preparation for the Winter Olympics, Holland Blumer created this particle animation, where the snowflakes accumulate to form the Olympic Rings. A cool and smooth effect.

Glass Panel Wave (OKLCH + 3D)

Eric Van Holtz creates this interactive animation with warm discs and cool semitransparent panels that float smoothly like waves. Move the mouse around (or tap if on mobile) and see how the animation slides and rotates swiftly. And all in vanilla JS, HTML, and CSS.

Chicky (Voxel by HTML and CSS)

Takane Ichinose coded this cute chick using cubes in HTML and 3D CSS. No JS, WebGL, or Three.js. If you uncomment the JS code, you'll be able to spin the chick and see it from different angles.

Graph Theory (Chrome Only)

Temani Afif creates so many amazing demos that it's tough to pick one, but this one goes beyond it. With minimal JavaScript to allow moving elements, Temani uses CSS anchors, style queries, animations and more to calculate distances and paths. Chrome only, but mind-blowing all around.

Flood Above the Floor

Wakana Y.K. coded this interactive 3D Web graphics demo built with Three.js. The water on the floor looks realistic reflecting the light and background images in a way that looks really natural. Beautiful effect.

Native Random Values in CSS

Alvaro Montoro — Thu, 26 Feb 2026 17:07:20 +0000

CSS has always been a deterministic language: given the same input, you get the same output. Every time. But that's about to change with the introduction of two new random functions in CSS.

This article dives straight into the feature. For a more thorough review —including the history of randomization in CSS, how the feature works, and what it means for CSS as a language—, check out my upcoming article, which complements a conference talk I gave recently.

At the time of writing this article, support for this feature is not widespread (only Safari offers partial support for the random() function from version 26.2). This is a review of the specification and the features that are coming.

Let's explore the new functions!

random()

random() returns a random value within a specified range. Its simplest form takes two parameters —a minimum and a maximum value—, and produces a result anywhere within that interval.

For example:

div {
  width: random(200px, 500px);
}

/*
Possible outputs:
- width: 230px;
- width: 417px;
- width: 308.342px;
*/

Notice how the resulting values aren't limited to whole numbers. Anything within the range is valid, including decimals.

Incremental Random

But sometimes we don't want decimals (who enjoys dealing with half‑pixels in a layout?), and the good news is that the function accepts an optional third parameter to define the step or increment applied to the random value.

To do that, we can add a third value at the end of the function. This value indicates the increment steps:

div {
  rotate: random(0deg, 180deg, 10deg);
}

/*
Possible outputs:
- rotate: 120deg;
- rotate: 40deg;
- rotate: 180deg;

Not possible:
- rotate: 5deg;
- rotate: 134deg;
- rotate: 89deg;
*/

The increments will start counting from the min value, which means that sometimes the max value may not be an option. For example, random(100, 200, 30) will return 100, 130, 160, or 190; but not 200 (it cannot be reached in increments of 30 from 100) or 210 (out of bounds).

Sharing Options

Each instance of the random() function will return a different value. But there are situations in which we don't want that to happen. For example, let's pretend aspect-ratio doesn't exist, and we want to create a square by setting a random width and height.

div {
  width: random(10em, 30em);
  height: random(10em, 30em);
}

/*
Possible outputs:
- width: 14em; height: 15em;
- width: 21em; height: 11em;
- width: 17em; height: 27em;
*/

There is a way to share random values within the same rule, element, or even globally. This would be done by adding a new parameter passed as the first in the list that allows value sharing.

It can have different values:

auto: the default, it will generate different values for each instance of the random() function. It can be omitted.

div {
  width: random(auto, 100px, 200px);
  height: random(auto, 100px, 200px);
}

/*
Using auto: this would be equivalent to calling random() 
without a sharing option.

Possible result:
- div.div1 --> width: 125px; height: 198px;
- div.div2 --> width: 142px; height: 101px;
*/

a dashed identifier (e.g. --w): the value will be shared by the properties within the rule.

div {
  width: random(--d, 100px, 200px);
  height: random(--d, 100px, 200px);
}

/*
Using a dashed identifier: All the divs will be squared, because 
the  generated value is shared by the properties (per element.)

Possible result:
- div.div1 --> width: 150px; height: 150px;
- div.div2 --> width: 134px; height: 134px;
*/

the element-shared keyword: it can go by itself or with a dashed identifier, the value will not be shared by the properties within the rule, but it will be shared through elements.

div {
  width: random(element-shared, 100px, 200px);
  height: random(element-shared, 100px, 200px);
}

/*
Using element-shared by itself: the generated value will be shared
by the elments but not by the properties within the element.

Possible result:
- div.div1 --> width: 150px; height: 134px;
- div.div2 --> width: 150px; height: 134px;
*/

/*--------------------*/

div {
  width: random(--v element-shared, 100px, 200px);
  height: random(--v element-shared, 100px, 200px);
}

/*
Using element-shared along a dashed identifier: the generated value 
will be shared by properties and elements (same value for all)

Possible result:
- div.div1 --> width: 128px; height: 128px;
- div.div2 --> width: 128px; height: 128px;
*/

the fixed keyword with a number id: it specifies a fixed global random identifier. So the value is shared globally.

div {
  width: random(fixed 0.5, 100px, 200px);
  height: random(fixed 0.5, 100px, 200px);
}

/*
Using fixed: the generated value is shared by the properties 
across all elements.

Possible result:
- div.div1 --> width: 167px; height: 167px;
- div.div2 --> width: 167px; height: 167px;
*/

With this, we have reviewed the different syntax forms and options of the random() function. Next, let's explore the second function introduced as part of the latest draft of the CSS Values and Units Module Level 5 specification.

random-item()

CSS includes properties with discrete values that cannot be expressed as a range. In those cases, random() is not particularly helpful. Instead, we need a function that takes a list of possible values and randomly selects one... and that is exactly what random-item() does.

The random-item() function takes a sharing option and a series of values as parameters, then randomly selects and returns one value from the list:

div {
  display: random-item(--d, block, flex, grid, table);
  opacity: random-item(--o, 0.5, 0.6, 0.75, 0.9, 1);
  background: random-item(--b, red, #00f, conic-gradient(#fff 0 0));
}

/*
Possible outputs:
- display: block; opacity: 0.9; background: #00f;
- display: grid; opacity: 0.6; background: red;
- display: flex; opacity: 0.75; background: red;
*/

One important detail: in random-item(), the sharing variable is not optional, it is required.

As a small curiosity, something some readers may already know, but that I discovered while reviewing this specification (though it likely originates from a different one): CSS allows the use of curly braces ({}) to delimit a list of comma-separated values when that list is used as a single value within a comma-separated list of parameters. Basically, this is only necessary when passing nested lists as parameters:

div {
  font-family: random({ Times, serif }, { Arial, sans-serif }, monospace);
}

/*
Potential outputs:
- Times, serif 
- Arial, sans-serif
- monospace
*/

Conclusion

I hope this article was insightful and that you learned about the upcoming random() and random-item() functions in CSS (already here if you are using Safari). It ended up being longer than expected, but I think it was worth covering all the options and explaining them in detail with examples.

Remember to consider browser support in CSS, caching, sharing, and performance implications when applying these functions in production. Also, think about practical use cases such as random colors, rotations, or spacing, which can enhance the visual experience without JavaScript.

Some may question if adding these functions at this level is a good idea at all. From an architectural point of view, they make sense: this is a layout concern, and it should be handled in the layout layer (CSS) rather than the logic layer (JavaScript), as has been the case so far.

...But more on that in the longer article coming up soon!

10 Cool CodePen Demos (January 2026)

Alvaro Montoro — Thu, 12 Feb 2026 03:12:07 +0000

border-shape chevron nav styled

Una Kravets showcases the border-shape and uses it to create a breadcrumb-style navigation with triangular sides. Simple and easy to code. Note: this demo requires Chrome Canary to work.

Responsive Grid of hexagon without media queries

In a series of experiments, Temani Afif shows what can be achieved using the corner-shape property. This hexagon grid is a great demo, unfortunately, it will only work on Chrome at the moment.

Poll graphic

This demo is not to showcase a current feature, but to ask people for their opinion about a feature to come: multiple borders and outlines. Lea Verou shared it on social media asking for feedback from developers about which option they thought was better.

genuary day 12

As part of Genuary, developers and artists code generative art. Sophia (Fractal Kitty) created these animated spinning boxes with P5.js. They change every time you click on the drawing.

Genuary 1: One color, one shape

Alexander Korotaev's entry for the first day of Genuary (more generative art coming up too). This animated star created with vanilla JS and canvas will change every time the page is reloaded.

Generative Ink Blobs

Holland Blumer coded this generative art that reminds of oil colors mixing. It will regenerate into a new random shape every time the page is reloaded or resized (it may take a second to generate, but it's worth it.) Great work.

Untitled

Another generative art piece, this time by Jacob Foster. These groups of particles move randomly around the screen leaving a trace of color and light after them. They are kind of hypnotic.

Lotus

This neon-looking lotus coded by Shivani can be slightly animated by clicking on it or pressing on the space button. Open or close, it is relaxing looking at the flower spin slowly.

Rigged Stick Walk

Another demo by Shivani. This time it is a study of a sticky figure walking, and the movement can be adjusted using some input ranges. Adjust the elbows, arms, hips, body... I miss an option for the knees, but it is a sticky figure after all.

Three.js: Start / Pause Animation

This animation by Diana Moretti was created for the Start button CodePen Challenge. It includes a Start/Pause button that starts and pauses the animation (thus the name). But the more interesting part is not the button in itself but the infinite loop that spins and can be animated using Three.Js.

CSS Art: Cat on the Moon

Alvaro Montoro — Sun, 01 Feb 2026 18:41:51 +0000

I built a small CSS Art scene: a cat astronaut standing on the moon.

The whole illustration is HTML + CSS: using gradients for lighting, border-radius for shapes, and shadows to create light (the irony). No SVG, no canvas.

The source code on CodePen:

I had already done the cat for a previous CSS Art, I adapted some shapes slightly, moving things around (especially in the face), changing colors (easy as I was already using CSS custom properties), and updating some sizes.

CSS Optical Illusions: 50+ Visual Illusions Built with Pure CSS and HTML

Alvaro Montoro — Thu, 22 Jan 2026 15:36:32 +0000

You can find a collection with all the optical illusions in this article (and more!) on CodePen (also on GitHub!). You can move your mouse over many of the demos below to reveal the effect or stop the animations.

1 - Poggendorff Illusions

The Poggendorff illusion is an optical illusion in which a diagonal line interrupted by a vertical bar appears misaligned, even when both segments are actually continuous.

A simple version of this effect can be seen in the following demo. I used the ::before and ::after pseudo-elements to create the diagonal line and the vertical bar, respectively.

The effect can also be seen in a more elaborate version with multiple diagonal lines and vertical bars:

This drawing can easily be achieved using two CSS gradients: one tilted at 70 degrees and another consisting of a series of vertical columns. I applied it to the body, although I could have used :root instead.

Another variation of this illusion is the Münsterberg Poggendorff Arch, in which the two sides of an arch appear misaligned and seem as though they will not meet at the top - but they do (mouse over to see it).

2 - Induced Gradients

The following illusions combine gradients and flat colors. Surprisingly, some of the gradients do not actually exist. They are simple gray bars that, when placed over a gradient, appear to have gradients themselves.

Take the following demo: all three bars (two vertical ones on the sides and one horizontal bar in the center) are the same shade of gray. The only real gradient is behind them, which tricks our brain into believing that the bars are different colors and even contain gradients.

Here is another variation of this effect. It looks like the central line has a repeating gradient of dark and light grays, but in reality it is a flat color. If you mouse over the demo, the bar will expand, making it clear that there is no gradient at all.

3 - Cornsweet Illusion

The next few optical illusions share a common idea: some colors are identical, but they do not look the same. This typically happens when regions of the same color or brightness are surrounded by areas with different contrast.

For example, in the following demo, the left and right ends are the same shade of gray. However, one looks lighter because it is closer to white, while the other looks darker because it is closer to black. Mouse over to reveal that they are, in fact, the same color.

4 - White's Illusion

Run the following demo. You will see two gray columns in a black-and-white grid. Both columns are the same shade of gray, but the one surrounded by black appears darker than the one surrounded by white.

I coded this demo using mix-blend-mode so I could try something a bit different. That worked well, but it also made it harder to showcase the effect on hover. In hindsight, I should have planned that better.

This optical illusion also works with colors. For example, these two squares appear to be different shades of blue, but they are the same color. This time, you can mouse over to reveal the effect:

5 - Wertheimer-Koffka Ring

The ring in the following illustration has the same color all the way around. However, one side is placed over white and the other over black, which makes them look different. If you mouse over the demo, the red bar will disappear, making it more obvious that the ring is a single, uniform color.

6 - Adelson's Illusion

You have probably seen the illusion involving a checkerboard and an object casting a shadow, where two tiles - one seemingly light and one seemingly dark - turn out to be the same color.

This demo follows the same principle. You will see two tiles labeled A and B. Both have the same shade of gray, but most people cannot tell at first glance (or second, or even third).

7 - Asahi illusion of Brightness

The circle at the center of this flower-shaped element is the same white as the rest of the page, but it gives the impression of being brighter, as if it were emitting light.

8 - Color Spheres

This is one of my favorite illusions in the collection. The circles (or spheres) look red, blue, or green, but in reality they are all the same grayish color. Our brain "colorizes" them based on the lines that overlap the shapes. Don't believe it? Mouse over the illustration.

9 - Colors from Contour

In the following illustration, the lines inside the yellow section appear blue, while the lines inside the blue section appear red… but they are all black (or very dark gray). The white contour creates the illusion of color. Mouse over to remove the contour and the lines will clearly appear black.

10 - Curvature Blindness

One set of lines looks straighter (top) while the other looks more curved (bottom). In reality, both sets are equally wavy. The only difference is how they are colored: changing the color at the peaks makes the lines look straighter. Changing it at the inflection points makes them look more curved.

The CSS code for the wavy lines is adapted from a Temani Afif snippet on CSS-Tricks and his wavy shape generator.

11 - Cafe Wall

This is a classic optical illusion and an easy one to code in CSS. Three gradients are all that is needed to generate the effect in which the horizontal lines appear slanted, even though they are perfectly parallel.

12 - Penrose Triangle

This optical illusion depicts an impossible shape. Parts that should be in front appear in the back, top becomes right, and everything feels contradictory. I coded this one some time ago for the 2024 Divtober event.

13 - Ebbinghaus Illusion

Which orange circle is larger: the one on the right or the one on the left? It is a trick question: both are the same size. However, having smaller surrounding elements gives the impression that one is larger.

I also created an animated version of this illusion (see below), as well as another version using a square shape instead of a flower shape:

14 - Kanizsa Square

When people look at this illustration, they usually say they see a white square over black circles. However, the square is not actually there. The "Pac-Man" shapes create the illusion of a square and a sense of depth. Our brain fills in the missing information.

15 - Ehrenstein's Illusion

There are no circles or discs in this illustration, only vertical and horizontal lines forming crosses. Our visual system completes the shape and makes us perceive a disc that does not exist.

16 - Neon-Color-Spreading Illusion

This illustration shows concentric circles, some of which have a green-and-black pattern. Our brain perceives a central patterned circle and four concentric circles around it, beneath the green circle.

I cheated a little when creating this in CSS, as I actually used a green circle blended with the other backgrounds.

17 - Hering and Wundt Illusions

Perspective-based illusions are fascinating. Even when we know we are looking at a flat image, our brain insists on interpreting depth.
In the Hering illusion, the red lines appear to curve outward, even though they are straight.

The opposite effect is the Wundt illusion. When the lines expand from the sides toward the center, the red lines appear to curve inward (this effect is more subtle).

18 - Ponzo Illusion

Both yellow lines are the same length, but the top one looks longer due to perceived depth and perspective. I tried a different approach when coding this one by applying a three-dimensional rotation in CSS… so the perspective is technically real.

19 - T Illusion

This illusion is easy to code in CSS and easy to fall for. Both the vertical and horizontal lines are the same length, but the vertical line appears longer.

20 - Müller-Lyer Illusion

A classic illusion: the horizontal lines are the same length, but inward- or outward-pointing edges dramatically change how we perceive them. I could swear the top one is longer. But it is not.
From a coding perspective, each shape is a pseudo-element. I ensured the horizontal lines were identical by using the same gradients and only repositioning the edges in the ::before and ::after.

21 - Tilted Table Illusion

It looks like the top rectangle is leaning to the left, but it is actually parallel to the one at the bottom. The trick lies in the direction of the diagonal lines used to "color" each rectangle.
This illusion works better on larger screens. The effect is diminished when you can see the whole picture.

22 - Parallel Lines

This is a simple effect: the black lines are parallel, but they appear not to be because of the direction of the bars crossing them.
I slightly overcomplicated this one while coding it. I initially built the black-and-red version below and tried to reuse more code than I probably should have.

Here is the original version I created. The effect is also visible there:

Good news! There are more optical illusions below - but first, a warning.

ATTENTION: The following optical illusions are static, but they give the impression of movement. Proceed accordingly.

(Leaving some blank space in case you do not want to continue.)
.
.
.
.
.
.
.
.
.
.
.

23 - Expanding Hole

This is a trippy optical illusion. It is completely static, yet it looks like the black hole at the center is expanding - especially when you are not looking at it directly, creating the sensation of falling into a pit.

From a coding perspective, this one was very simple: a background pattern made with two radial gradients, plus a blurred pseudo-element for the "expanding" hole.

24 - Rotating Snakes

This is one of only two optical illusions in this collection where I used HTML elements instead of relying exclusively on CSS. It is a classic effect: when you look at the illustration, the peripheral discs appear to rotate, even though nothing is actually moving.

25 - Appearing Dots

Another classic illusion. Focus on the white dots and the adjacent dots will appear to turn black. There is no animation, no transition, and nothing dynamic. Just intersecting lines and small white circles, yet it looks like motion.

26 - Disappearing Dots

This pattern consists of repeating black and white dots across the page. If you focus on one dot, the others will begin to disappear. At first it may happen by row or column, but after a short while, most of them vanish.

If you do not immediately see the effect, try focusing on one black dot. Mouse over it, wait a few seconds while keeping your focus, and then mouse out.

27 - Ouchi Illusion

This is a static image, but it gives the impression that the pattern inside the circle is moving sideways. This happens because our eyes are constantly making small movements, even when we are not aware of it.

If you cannot see the illusion, try slightly moving the screen (or your head) while looking just outside the circle.

28 - Orthogonal Dotted Lines Sway

When you look around this pattern, the central area appears to slide and sway, even though it is completely static. This illusion makes me dizzy... but that may also be because I had to stare at it for a long time while coding it.

29 - Enigma

This illusion is particularly interesting. There is a pink circle surrounded by concentric pink and purple rings. If you focus on the pink circle, the rings appear to spin or scintillate, as if there were some activity in them. Of course, nothing is actually moving.

30 - Waves

This demo was challenging to code and takes a long time to load. Mainly because it uses a large number of conic gradients behind the scenes, which browsers struggle to render efficiently. There is probably a better way to implement it, but I have not explored that yet.

If you look closely at the illustration, you may notice wave-like motion. As with the previous illusions in this section, the image is entirely static.

Good news! There are more optical illusions below - but first, another warning.

ATTENTION: The following optical illusions actually move, and the illusion is created by motion itself. Some of them can be dizzying, so proceed accordingly.

(Leaving some blank space in case you do not want to continue.)

.
.
.
.
.
.
.
.
.
.

31 - Animated Ebbinghaus Illusion

Earlier, we saw two static versions of the Ebbinghaus illusion. This one is animated. The elements move side to side, and the surrounding shapes grow and shrink, giving the impression that the orange circle is changing size - when it definitely is not.

32 - Psychokinematic Tower

This looks like a three-dimensional tower spinning in space, as seen from above. In reality, it is a flat, two-dimensional image rotating.
Mouse over the demo to stop the rotation and the illusion of depth disappears entirely.

33 - Color Fan

This optical illusion requires only two gradients: a conic gradient for the fan-shaped arms and a radial gradient for the circles and discs.

If you focus on the black dot, the illustration may appear to develop a darker greenish or brownish border. However, the colors never change.

34 - Reverse Spoke Illusion

This illusion is delightful and disorienting. While the background colors of the wheel are spinning, the spokes remain fixed. However, they appear to rotate in the opposite direction. In reality, only the background is moving.

35 - Motion Binding

What do you see in this animation? Most people report two sets of lines operating independently: one moving horizontally and another moving vertically. And that is exactly how it looks.

In reality, it is a single shape moving uniformly. Run the demo, mouse over the lines, and the true motion will be revealed.

36 - Mainz-Linez Illusion

Focus on one of the red dots. You will notice it moves straight up and down along a vertical path. Now shift your focus to one of the black crosses in the center. Suddenly, the red dots appear to zigzag instead of moving straight.

The CSS code for the wavy lines is adapted from a Temani Afif snippet on CSS-Tricks and his wavy shape generator.

37 - Waddling Colors

It may look like the boxes are moving at different speeds or like a set of walking feet. In reality, all elements move at the same pace and in parallel. Mouse over the demo to reveal the effect.

The illusion also works when the "feet" move in circles, as shown in this alternative version:

38 - Dotted-Line Motion

Follow the red dot as it moves sideways. From the corner of your vision, it may appear that the dashed black-and-white lines are moving closer together (when the dot moves left) or farther apart (when it moves right). In reality, the lines are completely static.

39 - Contrast Asynchrony

These dots always have the same color. However, when placed against alternating backgrounds, they appear to jump or move out of sync because of how they blend with their surroundings.

Mouse over the demo to remove the background and the illusion disappears.

40 - Breathing Square

This illusion gives the impression that a blue square is growing and shrinking rhythmically, almost as if it were breathing or beating like a heart.

Although the image is rotating, its size never changes. Mouse over the illustration to remove the green boxes and reveal the rotating blue square.

41 - Troxler Fading

This illustration shows a circle made of pink dots, with one dot missing. Focus on the cross at the center and the missing dot will appear as a yellow or green dot, giving the impression that it is "eating" the pink dots. Just like Pac-Man.

I could have used CSS trigonometric functions to calculate the exact positions of the dots, but since they never change, I chose to hardcode the values instead.

Here is a related effect. Follow the light gray circle as it spins, and the darker circles will appear to change from gray to greenish. Focus on the cross at the center, and after a short time, the darker circles may begin to fade entirely.

42 - Pinna-Brelstaff Illusion

This illusion is particularly dizzying. Follow the bluish dot as it moves from right to left and back again. It will appear as though parts of the tiled background are shifting, even though they are static. The only moving element is the dot.
From a CSS perspective, I coded the pattern using conic gradients, and applied it to the ::before and ::after pseudo-elements. I then flipped one upside down and clipped it.

43 - Palisade

The radii of a wheel, when viewed through a palisade, appear to curve. In reality, they are perfectly straight. Mouse over the demo to remove the palisade and you will see that the radii never bend.

44 - Alternative Motion

This animation demonstrates how our minds infer motion that may not actually be there. Consider the two blue dots. Different people perceive different movements: side to side, top to bottom, or even circular motion.

Cover the right side of the animation so that you see only one dot at a time. The motion now appears vertical. Cover the bottom part instead, and the motion appears horizontal. This is our brain trying to complete the movement.

45 - Motion Inversion

These two illustrations are identical - same shapes, same animation. The only difference is the CSS timing function.

The top animation moves smoothly from right to left. The bottom one appears to move choppily in the same direction, but if you focus on it, it may suddenly seem to reverse direction and move faster.

Most of the inspiration for these optical illusions came from two excellent resources:

"35 optical illusions and why they trick your brain" by Patrick Pester.
"154 Visual Phenomena & Optical Illusions" with explanations by Michael Bach

If you have questions about how any of these illusions were coded, leave a comment and I will do my best to answer.

CSS Optical Illusions

Alvaro Montoro — Thu, 15 Jan 2026 16:52:03 +0000

Over the past week, I have coded a series of optical illusions using CSS only (and some HTML for one of them, but most of them are CSS only). I created a collection on CodePen with 40 of them, although the number may grow in the next few weeks.

Many of them play with color effects, some others are animated, many of them should have (and do have) a motion warning... although probably I should add it to more. Coding some of them I got really dizzy 😬

These are some of my favorites from the collection:

Mainz-Linez Illusion

This one is animated (and it looks better in narrower/larger screens). The idea is to look at the red dots, and notice how they are moving up and down. Then focus on any of the black crosses... suddenly the red dots start moving in a wavy motion!

For this one (and the next one), I used a super ingenious wave shape generator by @afif.

Curvature Blindness

These set of curves are almost equal: the only thing that changes is their colors. Painting them from inflection point to inflection point or from peak to peak will make them look completely different. To the point that one of them kind of stops looking like a wave! (This one looks better in smaller screens).

Gray Color Circles

Do you see red, blue, and green spheres? What if I told you that they are all gray? (They really are! Mouse over the demo to reveal them) But overlapping some primary colors on top, the brain will "fill in" the circles with the colors at hand. At the beginning I was making the lines too tall and the effect was not visible. I like the end result.

Gray Bars

The two side columns, and the line in the middle are all the same flat gray color. Yes a single tone of gray. The only gradient is the background, not the lines in themselves. I liked that this demo is easy to see and easy to code.

The Breathing Square

Another animated one that you'll need to go see at CodePen. The blue square looks like it's pulsating or breathing. Growing and shrinking in sequence... but in reality it is the same square with the same size, just spinning. Mouse over to reveal it.

And like these five, there are 35 more. Check them out! I hope you like them. And I will be adding more in the next few weeks.

Drawing a Houndstooth Pattern in CSS

Alvaro Montoro — Sat, 10 Jan 2026 23:17:46 +0000

I associated the houndstooth pattern with childhood. Because I remember seeing it everywhere when I was little, but suddenly disappear and not seeing anywhere.

From a CSS perspective, the pattern is really simple and it can be created with just two gradients:

Conic gradient to generate a white and black box pattern
Repeating linear gradient (or just a linear gradient if you prefer) to generate the diagonal lines

For simplicity, I recommend having a custom property for the size, so it's easier to change the size by updating a single point in the code, instead of two… so really, not so necessary, but still convenient.

Here's a video generating the pattern in real time with CSS:

And here's the source code. And don't forget to change the value of the custom property --size to adjust it to your needs:

body {
  --size: 100px;
  background-size: var(--size) var(--size);
  background-image:
    conic-gradient(#fff 25%, #0000 0 50%, #000 0 75%, #0000 0),
    repeating-linear-gradient(
      135deg,
      #fff 0 12.5%, #000 0 25%, #fff 0 37.5%, #000 0 62.5%
    );
}

And that's how you draw a houndstooth pattern with CSS :)

10 Cool CodePen Demos (December 2025)

Alvaro Montoro — Tue, 06 Jan 2026 06:33:19 +0000

3D animated teardrop image gallery

What Ana Tudor can create with CSS using math functions is astonishing. This gallery is just one example of it... using parametric equations and with so little code! Mind-blowing.

Connected Circles with Anchor Positioning

Temani Afif is another developer who takes CSS to the limit (and beyond). Combining anchor positioning, attr(), container queries, shape(), trigonometric functions, and other modern features, Temani creates something that is almost unthinkable with plain CSS. Note: this demo will only work on Chrome for now.

RGB Dancer

Three videos, some CSS filters, and a few lines of JavaScript to follow the mouse (move the mouse around the dancer) is all that Alexandre Vacassin needed to create a hypnotic demo. Cool use of blend modes.

Progressively enhanced details element animation

In this demo, Cyd Stumpel uses a progressive enhancement approach to animate disclosures/accordions. From static elements (HTML), to animated (CSS), to a second layer of animations (JS) if the first one wasn't supported. Web development done the best way.

CSS Animated Light & Shadow

Amazing use of box-shadow, animations, and background gradients by Vicio Bonura. The effect is so realistic and smooth as the source of light moves around, that it's unbelievable that this demo is just HTML and CSS.

50 Year Calendar

Brett Schwickerath crafted a new version of one of those "eternal calendars" (good for 50 years). It may be a work in progress and not interactive yet, but the demo is coming along nicely: nice design, nice colors, responsive... Can't wait to see the final result.

Abstract Olives

Maybe it's nostalgia (I was born in the region that produces the most olive oil in the world), maybe it's that Genuary is around the corner, but this generative piece by Holland Blumer speaks to me. It's simply beautiful. Feel like printing it and hanging it in the office.

Christmas Switcher Tree

Superb use of colors, shapes, and animations. This demo by Lia Tsernant inspired me to create one using actual toggle switches. Needles to say, my demo doesn't come even close to Lia's... but that's normal considering how good this one is, and really good timing.

shader-art: lava #anydayshaders 40

Lea Rosema created another hypnotic shader. This one looks like the motion of a lava lamp in beige, black, and blue tones. It feels relaxing and peaceful. I like it.

CSS text-grow

Adam Argyle was at it again, sharing more demos of new and upcoming CSS features. This time it is text-grow, that he used to adjust the size of the text in the row to fit the justification. Creating a really cool effect. Note: this demo will only work in Chrome Canary after activating the experimental-web flag.

Bad CSS-Dad Jokes (VI)

Alvaro Montoro — Mon, 05 Jan 2026 13:16:00 +0000

I recently published an article with 100 Web Development Jokes, and I'm continuing the tradition of writing terrible CSS/HTML jokes into the new year! Without further ado, here are the jokes and puns...

Why are developers impressed with Tailwind?
It is a class act.

One semantic class is worth one thousand utility classes.

Why was the web developer afraid of accordions?
Because the devil is in the <details>.

CSS developers may seem flaky, but they always go the full 324in.

You can't judge a book by its background-size:cover.

border-width is my favorite CSS property.
It sticks with me through ⁠thick ⁠and ⁠thin.

Why did the <div> get upset?
It got bent out of shape().

What does CSS say when it's uncomfortable?
#00F

And when it's really uncomfortable: #0000000F!⁠

Why was the web page crying?
Because it got a <head>ache.

I was thinking about this alternative, but it feels off.

Why was the web page happy?
Because it hit the nail on the <head>

What movement does CSS Art belong to?
#DADA

Where do HTML elements go on vacation?
<spain>

Another option could be <li>sbon.

CSS doesn't like fruit, but it ate appearance.

What is CSS's favorite tree?
A #BA0BAB.

Did you hear about the vibe coder who got attacked by a mountain lion?
It got Claude.

HTML threw an amazing party.
Everyone said it was <li>.

-webkit-box-reflect isn't standard... but it already sees itself there.

What is CSS developers' favorite cloud service?
azure.

- Knock, knock!
- Who's there?
- display:none
- display:none who?
-

- Knock, knock! - Who's there? - display:flex - display:flex who? - 😏

What's the most popular HTML element?
⁠<time>⁠. It always has a date.

And that's it for now. You can check the previous editions of this series on my site:

Forem: Alvaro Montoro

Sharing CodePen 2.0 demos on DEV

10 Cool CodePen Demos (March 2026)

2026 F1 Drivers Custom Select using appearance: base-select

Select your Fruit!

Demo of lighter operator in SVGFECompositeElement

Neon Iridescent Ribbon using P5

Untitled

CSS position: sticky for Single Axis Scroll Containers

CodePen TV - 100% Pure CSS

using sibling-index() to hue-shift / increment opacity in svg paths

The CSS if() Function

Gekke zoom dingen

CSS in City

10 Cool CodePen Demos (February 2026)

Color Fan Deck

double-helix doodle 3

Scroll Driven Tri-Gyro

Birds Follow Cursor with 3D Sound - Three.js

My type? Someone who doesn�t disappear after the first commit.

Winter Olympics Blizzard

Glass Panel Wave (OKLCH + 3D)

Chicky (Voxel by HTML and CSS)

Graph Theory (Chrome Only)

Flood Above the Floor

Native Random Values in CSS

random()

Incremental Random

Sharing Options

random-item()

Conclusion

10 Cool CodePen Demos (January 2026)

border-shape chevron nav styled

Responsive Grid of hexagon without media queries

Poll graphic

genuary day 12

Genuary 1: One color, one shape

Generative Ink Blobs

Untitled

Lotus

Rigged Stick Walk

Three.js: Start / Pause Animation

CSS Art: Cat on the Moon

CSS Optical Illusions: 50+ Visual Illusions Built with Pure CSS and HTML

1 - Poggendorff Illusions

2 - Induced Gradients

3 - Cornsweet Illusion

4 - White's Illusion

5 - Wertheimer-Koffka Ring

6 - Adelson's Illusion

7 - Asahi illusion of Brightness

8 - Color Spheres

9 - Colors from Contour

10 - Curvature Blindness

11 - Cafe Wall

12 - Penrose Triangle

13 - Ebbinghaus Illusion

14 - Kanizsa Square

15 - Ehrenstein's Illusion

16 - Neon-Color-Spreading Illusion

17 - Hering and Wundt Illusions

18 - Ponzo Illusion

19 - T Illusion

20 - Müller-Lyer Illusion

21 - Tilted Table Illusion

22 - Parallel Lines

ATTENTION: The following optical illusions are static, but they give the impression of movement. Proceed accordingly.

23 - Expanding Hole

24 - Rotating Snakes

25 - Appearing Dots

26 - Disappearing Dots

27 - Ouchi Illusion

28 - Orthogonal Dotted Lines Sway

29 - Enigma

30 - Waves

ATTENTION: The following optical illusions actually move, and the illusion is created by motion itself. Some of them can be dizzying, so proceed accordingly.

31 - Animated Ebbinghaus Illusion

32 - Psychokinematic Tower

33 - Color Fan

34 - Reverse Spoke Illusion

CSS `position: sticky` for Single Axis Scroll Containers

using `sibling-index()` to hue-shift / increment `opacity` in `svg` `path`s