This is a submission for Frontend Challenge: Comfort Food Edition, CSS Art.
Inspiration
Yesterday I submitted a landing page for ChocoDEV, a chocolate brand that exists only in CSS. A brand needs a product shot, and this brand has a rule: no images, ever. So the product shot had to be drawn in the only medium the brand allows.
It is one chocolate bar with a bite taken out of it, because a perfect untouched bar is a lie. Nobody photographs their comfort food before tasting it.
Demo
Live: vinimabreu.dev/chocodev/bar
The fallen chunk reacts if you click it. That is the entire JavaScript budget, three lines, and the piece is complete without them.
Journey
Every chunk is a molded facet: four trapezoid faces built from angular gradients, so the light lands differently on each slope, the way a real mold presses chocolate. The letters are not printed on top, they are pressed in, one dark shadow above and one thin highlight below, and that two-shadow trick is the whole illusion of depth.
The bite was the hard part. A clean clip-path zigzag looked like scissors had done it, so the exposed edge got fracture facets in lighter matte browns and a few crumbs, because chocolate never breaks politely.
There is exactly one animation, a slow sheen that crosses the bar like it is turning under a studio light, and it sits behind a prefers-reduced-motion guard. When your system asks for stillness, the bar just stands there looking edible.
Everything is gradients, box-shadow, border-radius and clip-path. Open devtools, it is chocolate all the way down.
Top comments (2)
"A perfect untouched bar is a lie. Nobody photographs their comfort food before tasting it." That is a better argument for honest demos than most conference talks manage, and it applies well outside CSS art. The polished untouched version of anything is the version nobody has used yet.
The detail I liked most is that the letters are pressed in rather than printed on top. That is the difference between something modelled and something decorated, and it is usually the part that gets skipped because nobody would notice it missing. They would notice, though. They just would not know what they were noticing.
The bite started as composition and ended up as the thesis. Software demos have the same problem: the screenshot everyone ships is the untouched bar, first run, empty states, nothing retried. The version worth showing is the one with a bite out of it, the run that hit a rate limit two thirds in and recovered, the log with the one ugly line. That is the only version that proves somebody actually ate it.
On pressed versus printed, the test I use for systems is whether a detail shares its source with the thing it belongs to or was added after. The pressed letters inherit the bar's geometry, so the light treats them like chocolate. A printed label just sits on top and drifts. Most dashboards are printed: the number was true the day someone typed it.
And nobody naming it is the point. Users file that difference under "feels solid", which may be the best review a detail can get.