Ilish Polao: Bringing My Ultimate Comfort Food to Life with Pure CSS

This is my official entry for the Frontend Challenge - Comfort Food Edition under the CSS Art category.

Inspiration 🍚🐟
When thinking about "comfort food," I didn’t want to pick a generic burger or pizza. I wanted to build something tied directly to home and my culture: Ilish Polao (Hilsha fish cooked with fragrant rice).

Hilsha is the national fish of Bangladesh, and Ilish Polao—paired with a side of spicy-sweet tomato chutney—is the ultimate comfort meal in our house. Translating a dish loaded with personal memory into raw CSS felt like the perfect way to combine culture with code.

Demo

mahbubasultanaety.github.io

GitHub Repository:

MahbubaSultanaEty / hilsha-polao

How I Built It
Instead of relying on SVGs or background images, every visual element in this piece is built from scratch with HTML elements and pure CSS styling.

Here is a quick breakdown of what went into the scene:

• Fish-Shaped Platter:
  Built using layered border-radius curves and subtle box-shadows to mimic ceramic depth.

• The Polao Mound:
  Formed using rounded CSS containers with layered gradient textures.

• Scattered Rice Grains:
  Instead of hardcoding dozens of

  tags in HTML, I used a tiny JS script to generate and randomly position rice grains over the mound so the texture feels natural rather than grid-like.

• The Hilsha Piece:
  Crafted with CSS clip-paths and custom border geometries to get the signature cut and inner texture right.

• Animated Steam:
  CSS keyframe animations controlling opacity and vertical translate transforms to give the food a hot, fresh feel.

• Garnishes & Sides:
  Added cinnamon sticks, bay leaves, green chilies, and a small side bowl of tomato chutney to complete the plate.

The Sprinkle of Javascript: Rice Generation
Hardcoding hundreds of rice grains in static HTML felt redundant. So I used the minimal for loop JS approach to scatter them:

This tiny bit of scripting saved me time and made the plate look organic every single render.

Takeaways
Building CSS art always forces you to think differently about web layout tools. border-radius, clip-path, and CSS animations aren't just for UI cards and buttons—they're fully capable illustration tools when pushed a bit.

Would love to hear what you think of the dish in the comments! What's your go-to comfort food you'd try rendering in CSS?