Grandma's Kitchen Table — A Photorealistic Pie Scene

Prince Panchani — Tue, 04 Aug 2026 10:03:49 +0000

This is my submission for the Frontend Challenge – Comfort Food Edition: CSS Art.

Grandma's Kitchen Table

Inspiration

Comfort food isn't just about what's on the plate—it's about the memories that come with it.

Growing up, Sunday mornings at my grandmother's house always meant the same scene: a freshly baked lattice pie cooling by the window, tea that had long gone cold because she was busy taking care of everyone else, handwritten recipe cards scattered across the table, and cookies that somehow always appeared beside every cup.

Rather than creating a perfect food photograph, I wanted to recreate the feeling of sitting at that table.

That's why the pie already has a slice missing. There are crumbs where they'd naturally fall, a lace napkin doubling as a coaster, coffee rings on the recipe card, and a handwritten note tucked into the corner that reads:

"Eat more pie! Love, Grandma ♥"

My goal wasn't simply to draw food—it was to capture nostalgia using nothing but CSS.

Demo

🔗 Live Demo: https://princexdev.github.io/css-art-comfort-food/
💻 Source Code: https://github.com/PrinceXDev/css-art-comfort-food

The entire artwork is built using pure CSS.

There are:

❌ No images
❌ No SVG
❌ No Canvas

Everything is created using gradients, masks, pseudo-elements, transforms, shadows, and modern CSS features.

A small amount of JavaScript is used only for subtle interactions, including parallax, drifting steam, and a real-time pocket watch.

Journey

What began as a simple pie illustration gradually evolved into an entire lived-in kitchen table.

Instead of asking, "What food should I draw?" I kept asking, "What would actually be sitting on Grandma's table?"

That question transformed the project into a detailed composition containing nearly twenty handcrafted objects, including:

Lattice pie with a sliced serving
Melting ice cream
Floral teacup
Cookies
Sugar bowl
Jam pot
Milk jug
Pie server
Folded newspaper
Reading glasses
Pocket watch
Brass keys
Wildflowers
Handwritten recipe card
Grandma's note

Every object was built individually using CSS before being composed into a single scene.

Highlights

🥧 A Real Woven Pie Lattice

One of the biggest technical challenges was creating a convincing woven lattice.

A simple clip-path wasn't enough because it couldn't produce alternating visible sections without merging them into a single shape.

Instead, I used CSS mask with hard-stop gradients to selectively hide portions of each strip, allowing the vertical and horizontal pieces to weave naturally over and under one another—just like a real pie.

DEV Community: Prince Panchani

Grandma's Kitchen Table — A Photorealistic Pie Scene

Grandma's Kitchen Table

Demo

Journey

Highlights