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. Radial gradients and repeating gradients made it possible to add subtle variations to the dosa instead of making it look like a simple flat shape.

I also added a small interaction: clicking the plate gives it a subtle animation, making the otherwise static CSS artwork feel a little more alive.

What I learned

This project was a great reminder that CSS can be used for much more than layouts and styling.

A combination of:

Gradients
+
Border Radius
+
Box Shadows
+
Pseudo Elements
+
Transforms
+
Animations

Enter fullscreen mode Exit fullscreen mode

can create surprisingly detailed illustrations without requiring external image assets.

It was also a fun exercise in thinking about how to break a real-world object into simple geometric shapes and then reconstruct it using CSS.

What I’m proud of

I’m particularly happy that the complete food scene is created using HTML + CSS, with only a very small amount of JavaScript used for the click interaction.

The main visual elements — dosa, banana leaf, chutneys, sambar, masala, garnish, and steam — are all CSS-generated.

Final Thoughts

Masala dosa is one of those foods that feels like home, and that made it a perfect fit for the Comfort Food Edition challenge.

This challenge pushed me to look at CSS not just as a styling language, but as a tool for creating illustrations and experiences.

A little CSS, a little creativity, and a lot of dosa. 🍽️❤️

Project: CSS Masala Dosa — A Plate of Comfort
Built with: HTML, CSS, JavaScript
Platform: CodePen
Challenge: Frontend Challenge — Comfort Food Edition / CSS Art