Animated Colorful Eyes Using HTML and CSS

This animation showcases a pair of abstract, animated eyes built entirely with HTML and CSS. The design combines shapes, gradients, and motion to create a unique visual that resembles two blinking or glowing eyes shifting with rhythm and style.

Structure and Layout

The design is made up of two identical elements, each representing an eye. They are placed side by side and centered within a flexible container. Both eyes share the same internal structure, consisting of layered circular shapes that simulate pupils and irises.

Each eye is housed inside a black container with a curved, capsule-like shape. These containers are shaped with large border radii on alternating corners, giving each eye a mirrored, asymmetrical look. This makes them feel dynamic and stylized rather than perfectly round.

Layered Components Inside Each Eye

Inside each eye, multiple circular layers are stacked on top of one another to create depth and texture:

• The outermost circle has a gradient background with shades of red, green, blue, and dark gray. This forms the base of the eye.

• Inside that, a slightly smaller circle adds more gradient color, giving the appearance of an iris.

• A third, even smaller circle sits at the center and acts as the core of the eye.

Within the deepest layer, two thin vertical elements simulate pupils. These give a sense of direction and movement to the eye, creating the impression of looking around or blinking.

Animation Effect

The main animation is applied to the eye containers themselves. Each one repeatedly changes its height using a smooth alternating animation. This results in a pulsing or blinking motion that plays continuously.

As the eye expands and contracts vertically, the internal layered circles remain centered. This creates a subtle breathing effect, where the eye seems to be alive or responding to light or movement.

The animation alternates direction each cycle, making the motion feel natural rather than repetitive. The eye shapes shift in size while maintaining their rounded corners, adding a playful energy to the design.

Visual Style

A key feature of this animation is the use of gradient backgrounds. Each circular layer uses a multicolor linear gradient, which gives the eyes a futuristic and colorful glow. These gradients smoothly blend from red to green to blue, enhancing the visual depth.

The combination of rounded shapes, bright colors, and soft motion creates a hypnotic effect that draws the viewer’s attention. The design feels both techy and organic, suitable for creative digital themes or experimental UI designs.

This animation is a creative way to display moving visuals using only HTML and CSS. Its layered structure and color transitions make it stand out, and the eye-like motion adds a touch of personality to any webpage or interface.