Creating a Chatbot Using Only CSS!

Introductions

This project was created as part of my “CSS Limit Series,” where I explore how far CSS alone can be pushed.

Continuation

This page continues from the previous article.

Development

Here I describe the background and development process.

Random Text Output

The ability to generate random output using only CSS is achieved through CSS animations.

By rapidly switching the content property of a pseudo‑element using CSS animations (running at about a 10ms interval), it creates the appearance of randomness.

Because the user’s click timing is unpredictable, the animation can be stopped exactly when the checkbox is clicked by setting animation-play-state: paused;.

This makes it look as if the output is truly random.

Infinite Chat

This technique makes the chat appear to continue indefinitely.

I explained this mechanism in detail in the previous article.

3/ Design & UI

The UI is inspired by ChatGPT.

It uses a grayscale theme with centered elements, creating a clean and stable layout.

About the Prototype

There are about three prototypes.

I plan to publish the prototypes on CodePen.

Conclusion

I created a chatbot using only CSS and HTML. This version uses random generation, but in theory, limited conditional branching is possible, so I am considering developing a more advanced version.

I am also exploring the idea of adding selectable option buttons for users.