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!