This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.
Inspiration
When nothing else will do, I make daal bhaath chokha, the plate I grew up with in Jharkhand. It is easy, simple, nutritious, and my true go-to comfort food.
A steel thali, steamed rice on one half, warm turmeric daal poured on the other, and a scoop of mashed-potato chokha mixed with onion and green chili. That is home on a plate. I wanted the CSS art to feel like that everyday serving, not a fancy restaurant dish, just the food that always works.
Demo
Live demo: CodePen
What’s on the plate (pure CSS, no images, no JavaScript):
- Steel thali with specular rim light
- Split base: bhaath (rice) on one half with individually visible grains, turmeric-gold daal poured on the other
- A wavy seam where they meet, with the rice casting a shadow onto the daal
- Jeera (cumin) seeds scattered through the daal
- A small circular scoop of mashed-potato chokha on the daal, flecked with onion and green chili
- Steam wisps and mustard-oil shimmer (respects
prefers-reduced-motion)
Journey
I started with separate mounds and a daal katori, then reworked the composition into a more honest home plating: rice and daal as one base layer filling the thali, and chokha as a small topping on the daal, the way it actually lands on my plate.
The hardest part was making the rice read as rice. Tiny round stipples over near-white just washed out into a flat blob. I rebuilt it as three overlapping layers of elongated gradient tiles, each grain with a lit edge over an offset shadow, rotated at different angles so the pile feels organic. Getting that contrast right took more iteration than the plate itself.
Other craft I’m proud of:
- An irregular
clip-pathseam plusdrop-shadowso the rice appears to sit in the poured daal - Hand-placed jeera seeds and onion/chili flecks as tiny absolute nodes
- Light motion (steam + oil shimmer) that freezes under
prefers-reduced-motion - An earthy Jharkhand kitchen palette via CSS custom properties, with no purple gradients and no image assets
Built with vanilla HTML + CSS for #frontendchallenge. License: MIT
