This is a submission for Frontend Challenge – Comfort Food Edition, CSS Art.
Inspiration
My comfort-food inspiration for this project was Adjarian khachapuri, the iconic Georgian cheese bread with a golden crust and a molten egg yolk resting in the center. It feels like a warm, homemade hug: rich, cozy, and deeply comforting. I wanted to recreate not just the look of the dish, but the feeling of it being fresh from the oven.
I love how food can be a story in itself, and this challenge gave me a chance to turn a favorite comfort dish into a tiny scene built entirely with HTML and CSS. The goal was to capture the softness of the cheese, the warmth of the crust, and the playful glow of the yolk through gradients, shadows, and subtle motion.
Demo
This project is a pure CSS illustration of an Adjarian khachapuri, built with layered shapes and gradients rather than external images or assets.
Live demo: GitHub repository
If you want to view it locally, just open the project in a browser and interact with the yolk to trigger the jiggle animation.
Journey
This project started as a simple challenge: create a food illustration using only CSS. I quickly realized that the real magic was in the details. The crust needed warmth and depth, the cheese needed softness and texture, and the yolk needed to feel glossy and slightly luxurious without relying on any images.
I spent most of my time refining the gradients and shadows to give the khachapuri a more realistic, premium look. The crust is built with warm browns and highlights to mimic baked dough, while the cheese uses soft ivory tones and subtle highlight bubbles to create a melted, creamy effect. The yolk is the focal point, and I added a small jiggle animation so the composition feels alive and playful.
One thing I’m especially proud of is the way the illustration still feels simple and clean even with the detailed shading. It stays very CSS-first, but it has enough contrast and texture to feel like a polished food shot.
I also learned how much personality can come from small design choices: the steam, the shadow beneath the board, the wobble of the bread, and even the tiny highlights on the cheese. These details make the illustration feel warm and appetizing rather than rigid or flat.
This project reminded me that CSS art is not just about drawing shapes. It is about crafting emotion. A comfortable, believable composition can do a lot with color, depth, and motion alone.
I hope to keep exploring more food-themed CSS illustrations in the future, especially ones that focus on texture and storytelling. It has been a really fun way to combine design, illustration, and front-end development.
Thanks for reading, and if you love warm comfort food as much as I do, I hope this little khachapuri made you smile.