Turn Off the Lights: a CSS-only Salvadoran Pupusa Table

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

Inspiration

I'm from El Salvador, and here comfort food has one name: pupusas. Thick corn tortillas stuffed with cheese, beans and chicharrón, served with curtido (pickled cabbage slaw) and tomato salsa. It's our national dish, but more than that — it's the food you eat at a plastic table at night, under one warm light, with the comal hissing somewhere behind you.

That last image is what I wanted to capture. Not just the plate: the moment. So the piece has a light switch.

Demo

Two things to try:

1. "Bañar en salsa" — pours salsa over each pupusa with a staggered cascade.
2. "Apagar la luz" — turns the whole scene into a night pupusería, lit only by a flickering candle (veladora).

Journey

Everything is CSS: gradients, border-radius, box-shadow and blend modes. No images, no SVG, no libraries. JavaScript is 15 lines — two class toggles.

The tablecloth is the flex. The blue-and-white geometric mantel is five bands built entirely with repeating-conic-gradient and repeating-linear-gradient — chained diamonds, sawtooth rows, chevrons. Zero background images. This was the part I rewrote the most until the patterns locked together.

The night is one single element. When you turn off the light, I'm not repainting anything. A single overlay div with mix-blend-mode: multiply holds two stacked radial gradients: near-white around the candle (multiplying by white changes nothing — so that IS the light), falling off to deep blue at the edges. The steam even turns moonlit-blue for free, because that's just what multiply does to white pixels. One div, one blend mode, full day/night mood shift.

Corn kernels are two offset dot grids. The mazorca's kernels are two radial-gradient grids shifted by half a cell — which is exactly how kernels interlock on a real cob. That half-cell offset is the difference between "corn" and "polka dots".

The curtido is seven crossed stripe layers. White and purple cabbage, carrot, chile — each one a repeating-linear-gradient at a different angle and spacing. The angles are deliberately non-repeating so your eye never catches the pattern and it reads as shredded slaw.

Nothing pulses in sync. The three steam wisps run at 5.4s / 6.8s / 6.1s, the flame flickers at 1.7s, its halo breathes at 2.6s. If any two shared a period, the scene would feel mechanical.

Accessibility: the scene has a full role="img" description in Spanish, both buttons are real <button> elements with aria-pressed, and prefers-reduced-motion doesn't kill the atmosphere — the steam and candle glow freeze visible instead of disappearing.

What I'd do next: a comal mode where you flip the pupusas before plating them. But that's another challenge.

Made with corn and CSS in El Salvador 🇸🇻