This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.
Inspiration
For me, comfort food is closely tied to a South Indian breakfast at home.
I am currently in Canada, and this piece came from missing India and the small everyday things that feel familiar when you are away from home.
Idli, sambar, coconut chutney, a banana leaf and filter coffee are all part of that memory for me. They are simple, everyday things, but together they carry a lot of warmth, routine and comfort.
That is what I wanted to capture with Morning on a Banana Leaf.
I did not want the final piece to feel like a landing page or a UI concept. I wanted it to feel more like a still life, with the food, materials and atmosphere doing most of the talking.
The first version was actually an interactive tiffin box that opened to reveal the meal. It worked, but I realised I was spending more time on the lid, handle and mechanics than on the food itself.
So I changed direction and focused on the breakfast.
Demo
If the embed does not load, you can view the project on CodePen.
Journey
The final composition is built around a banana leaf with three idlis, sambar and coconut chutney.
I also added a stainless steel spoon, a davara tumbler of filter coffee, a partially cropped side plate, steam and warm morning light to give the scene more depth and make it feel recognisably South Indian.
Everything in the scene is drawn in the browser.
There are no photographs, SVG illustrations or canvas elements.
The banana leaf is built from layered gradients, shadows, a midrib and individual veins. The idlis use small radial gradients to create surface pores and keep them from looking like plain white circles.
The steel bowls, spoon, davara and tumbler were probably the hardest parts to get right. Simple grey gradients looked flat, while stronger highlights quickly started to look like chrome. I ended up layering darker edges, softer reflections, inset shadows and warmer tones from the surrounding scene.
The sambar includes small oil marks, curry leaves and a chilli. The chutney has mustard seeds and tempering details. I also added coffee foam, wood grain and a few small imperfections around the scene so it would not feel too clean or mechanical.
The animation is intentionally restrained. The different parts of the breakfast arrive in stages, then the scene settles and the steam becomes the main continuous movement.
There is also a small desktop pointer effect. JavaScript only updates two CSS custom properties based on pointer position, while CSS handles the actual perspective transform.
For accessibility, the artwork is wrapped in a figure with a descriptive label, decorative elements are hidden from assistive technology, and prefers-reduced-motion disables the entrance animations and pointer movement.
The biggest thing I learned while making this was that adding more CSS does not automatically make CSS art better.
The project improved the most when I started removing things and paying more attention to composition, overlap, light, material and cultural context.
The final version is very different from where I started, but it is much closer to what I wanted to make:
A small piece of home, remembered through the browser.
Thanks for viewing Morning on a Banana Leaf.
Top comments (25)
Good CSS/HTML coverage. The landscape here moves quickly β worth noting that container queries and :has() selector support have reached baseline, which can simplify many of the responsive patterns we previously needed JS for.
Thanks for highlighting that!
Modern features like container queries and :has() have been huge game-changers for responsive design. Itβs definitely time to revisit some of those older patterns and streamline the CSS.
Exactly,
:has()alone eliminates so many JavaScript workarounds we used to rely on for parent styling. When you refactor those older media query patterns to use container queries, do you find it makes the components significantly more portable across different layouts?Good question! In my experience, absolutely.
Container queries decouple the component from the viewport entirely, making it much easier to drop into different layouts, like sidebars, main content areas, or grid cards, without needing to write context-specific overrides. It definitely feels like the true realization of modular design.
Decoupling from the viewport is exactly what makes container queries so powerful for true modular design. When components adapt to their immediate context rather than the browser window, dropping them into a sidebar or a dense grid card just works out of the box. Have you experimented with combining container queries and the :has() selector to create completely self-contained, JavaScript-free responsive components yet?
Container queries are especially perfect for a layout like this where the breakfast items need to scale based on their own plate size rather than the overall viewport. I am curious if you plan to refactor the existing markup to use :has() for styling specific dishes based on their parent container state.
Beautiful. We also have this tradition in the Philippines where we use huge banana leaves as plates. Rice and food are served there. This is common during fiestas or just simple celebration events. Didn't know we have a similar culture with food. Great work @sushyam_nagallapati!
Thatβs awesome! @codingwithjiro Iβve seen Boodle Fights in Filipino culture before and always loved how similar that tradition is, eating off a banana leaf really brings a special kind of warmth to sharing a meal. Really cool to connect over that shared piece of culture! π
Yeah that was the term, boodle fights hahahaha. I was trying to remember it while typing my comment earlier. Thanks for mentioning the exact term π
π No mention. Glad that brought back the beautiful memories.
As a fellow south indian , this is beautiful and good . And i am idli sambar guy π
Same here! Idli sambar is top tier comfort food. Appreciate the love, man! ππΌ
A North Indian girl also loves idli sambar, bro! π
Haha, awesome! Good food truly connects everyone. Thanks for stopping by! π
haha ππ
Capturing the subtle porous texture of the idlis with radial gradients and getting the stainless steel reflections right without overshooting into harsh chrome is incredible work!
Metallic surfaces are notoriously difficult to render in pure CSS without relying on SVGs or canvas, so layering ambient scene reflections with inset shadows was a brilliant choice. The lighting and warmth in this piece really pull off the "still life" feel. Fantastic submission!
Thank you so much!
Getting the stainless steel and the porous texture right took a lot of trial and error with gradients and shadows, so I really appreciate you noticing those specific details. Glad the warmth of the scene came through!
This is beautiful, the pure CSS constraint makes it even more
impressive, especially the steel bowls and tumbler. That's exactly
the material that's hardest to fake without SVG or canvas, since
metal highlights either look flat or too "chrome" like you mentioned.
The detail about removing things to improve the composition is such
an underrated lesson in CSS art (and design in general), more layers
don't always mean more realism, sometimes it's just more noise.
Also really appreciate the accessibility thought here, the
prefers-reduced-motion handling and the descriptive figure label
aren't things most CSS art submissions bother with.
This does what good comfort food art should do, it made me think of
home too, and I'm not even South Indian. Beautifully done.
Thank you so much for the thoughtful feedback!
Getting the metallic highlights right took a lot of trial and error, so Iβm glad that detail resonated with you. I really appreciate you noting the accessibility side of things too. It's easy to overlook when building pure CSS art, but it makes a big difference. Glad the piece connected with you!
πππ
Thank you
nice)
Thank youπ
Some comments may only be visible to logged-in visitors. Sign in to view all comments.