Biryani CSS Art — India's Soul in Every Grain 🍛

Frontend Challenge CSS Art Submission 🍲🥧

This is a submission for Frontend Challenge – Comfort Food Edition, CSS Art.

Inspiration

I chose to build a classic Dum Biryani — the ultimate comfort food! 🍛
There is nothing quite like opening a steaming handi of biryani and seeing the rich, saffron-colored rice dotted with fried onions, mint, and spices. It’s a dish that brings people together and feels like a warm hug, making it the perfect inspiration for the Comfort Food challenge.

Demo

Here is my CSS Art representation of a traditional Biryani Handi!
I built this primarily using vanilla CSS to create the realistic clay texture of the pot, the individual grains of rice, the steam animations, and the garnishes. I added a tiny bit of JavaScript just for a subtle mouse-parallax tilt effect and a saffron sparkle when you click the pot.

https://github.com/pandeynitish23/dev_css_chalange/
https://dev-css-chalange.nitishkumar-nk-np.workers.dev/

Journey

Building this was a really fun exercise in CSS gradients and positioning!
What I’m most proud of:

• The Clay Handi: I used layered radial and linear gradients along with inset box shadows to give the pot a realistic, 3D clay texture with lighting highlights.
• The Rice & Garnishes: Creating individual rice grains, mint leaves, and onion crisps using CSS border-radius and positioning was tedious but incredibly rewarding when it all came together.
• The Atmosphere: Adding animated steam and floating background spice particles helped bring the scene to life and make it feel hot and fresh. It was a great challenge keeping the JavaScript minimal and relying on pure CSS for the heavy lifting of the art itself!