CSS Masala Dosa — A Plate of Comfort 🍽️

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art . Inspiration For my CSS Art submission, I wanted to create something that represents comfort food from South India — Masala Dosa . 🇮🇳 A crispy, golden dosa served with potato masala, coconut chutney, tomato chutney, and a warm bowl of sambar is more than just a meal. It's one of those dishes that immediately feels familiar and comforting. I decided to recreate the entire plate using HTML and CSS , without using food images or external graphics. The goal was to turn a simple plate of masala dosa into a small CSS illustration while keeping the focus on CSS techniques such as: CSS gradients Radial and repeating gradients Border-radius based shapes Box shadows Pseudo-elements CSS animations Responsive layouts Layering and positioning The project is called "CSS Masala Dosa — A Plate of Comfort" . Demo 🍽️ Live CodePen Project: CSS Masala Dosa — A Plate of Comfort View the CSS Masala Dosa project on CodePen Journey I started with the idea of creating a single plate entirely from CSS . Instead of using an image for the dosa, I built the main shape using layered gradients and rounded shapes. The different colors and textures help create the crispy, golden appearance of the dosa. Then I added the individual elements of the meal: 🥞 Masala Dosa — built using multiple gradients, shadows, and layered shapes. 🥔 Potato Masala — represented using small CSS shapes for potato pieces, onions, and curry leaves. 🥥 Coconut Chutney — created using a circular CSS shape with subtle texture details. 🌶️ Tomato Chutney — another CSS-only circular element with layered gradients. 🥣 Sambar — built as a small bowl using nested circular elements and gradients. 🌿 Banana Leaf — created with gradients, shadows, and a CSS vein to give it a natural appearance. ♨️ Steam — animated using CSS @keyframes to give the dosa a freshly-served feeling. One of the things I particularly enjoyed was creating the food textures without images