Midnight Borscht: CSS Comfort Food Art

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Inspiration

Midnight Borscht is inspired by the kind of comfort food that feels quiet instead of flashy: a deep beet soup, a spoon on the side, rye bread nearby, sour cream melting into the surface, dill scattered on top, and an embroidered tablecloth underneath.

I wanted the art to feel like a small kitchen after dark. The bowl is warm, the wall tiles are dim, and the tablecloth pattern gives the scene a handmade feeling.

Demo

Live demo: https://desciple88.github.io/midnight-borscht-css-art-devchallenge-2026/

Source code: https://github.com/desciple88/midnight-borscht-css-art-devchallenge-2026

Journey

The constraint for this piece was simple: no images, no SVG, and no JavaScript. Everything is HTML and CSS.

The bowl, soup surface, sour cream, dill, beet pieces, potato, spoon, bread, wall tiles, and woven tablecloth are all built from layered div and span elements with gradients, border radii, shadows, repeated backgrounds, transforms, and pseudo-depth.

The hardest part was making it read as food at both desktop and mobile sizes. The desktop version has a composed poster feel, while the mobile version keeps the bowl large enough to show the toppings without letting the scene become a random crop.

CSS details I cared about:

• The borscht surface uses stacked radial gradients to keep the soup from looking flat.
• The sour cream and dill sit above the beet base to create a clear focal point.
• The tablecloth is made with repeating linear gradients and stitched bands instead of an image.
• The wall tiles use rotated CSS squares so the background still feels handcrafted.
• Steam is animated, but prefers-reduced-motion disables the motion for users who request it.

I self-checked the final piece with local desktop and mobile screenshots, verified that the page contains no image, SVG, or script tags, and deployed it as a public GitHub Pages demo.

License: MIT.