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.
Top comments (0)