This content originally appeared on DEV Community and was authored by Naman Dhakad
This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.
Inspiration
Tonkotsu ramen. It's the bowl I want when nothing else will do — slow-simmered pork-bone broth turned milky and opaque, a jammy marinated egg, soft rolled chashu, scallions, menma, a clean nori sheet, and that iconic pink narutomaki spiral. The whole thing is comfort in liquid form: rich, warm, and steaming.
I wanted to see if that feeling — not just the look of food, but the mood of a quiet late-night ramen-ya — could come through with CSS as the main ingredient. So this isn't just a bowl on a page; it's a composed table scene: warm wooden grain under an overhead light, a bamboo trivet, chopsticks resting on a ceramic hashioki, a small dish of pickled ginger, and a stamped order ticket.
Demo
I built it as a single self-contained HTML file (HTML + CSS + a light sprinkle of JavaScript). It's live here:
Try it: hover the ajitama egg, and move your cursor around — the steam and the overhead light shift with a gentle parallax. (Everything still works and stays still if you prefer reduced motion.)
Journey
The star of the show is CSS, as the prompt asks. JavaScript is deliberately light — only two small, purposeful things: nudging the steam's rhythm so it never loops like a metronome, and a soft pointer-parallax for depth. Here's what the CSS is doing:
-
Broth — layered
radial-gradients for the milky tonkotsu surface, with floating chili-oil droplets and sesame specks stacked via tinyradial-gradients inmix-blend-mode: screen. -
Narutomaki swirl — the pink spiral is a
conic-gradientcut into rings with aradial-gradientmask, so you get the real "pinwheel" cross-section instead of a flat disc. -
Chashu — rolled pork viewed from above: a
repeating-radial-gradientrenders the concentric spiral of the meat roll, with faint fat layers and a glaze highlight. -
Noodles —
repeating-radial-gradienttangles peeking out from under the toppings. -
Ceramic bowl — the depth is all
box-shadow: inset lights on the rim, inset darkness inside, and a cast shadow below, plus a curved specular highlight on the flank. -
Steam — blurred, semi-transparent puffs rising on
@keyframeswith randomized durations and three drift variants (rise,riseL,riseR) so the plume feels organic rather than mechanical. -
Typography & mood — a Noto Serif JP + Cormorant Garamond title block (
ラーメン / Tonkotsu Ramen), a torn-edge order ticket with a red 味 hanko stamp, and a warm color grade to push the "I want to eat this" psychology.
A real bug worth calling out: at one point the wood-grain background was rendering on top of the bowl, burning dark stripes across the broth, chopsticks, and ticket. The culprit was a mix-blend-mode: multiply ::after layer painting above the scene. The fix was giving the scene z-index + isolation: isolate so all the internal blend modes stay contained — a good reminder that stacking context, not just z-index, decides what wins.
What I'm proud of: the narutomaki mask trick and the steam randomization — both are small but they sell the "alive" feeling.
What's next: a pour-and-stir animation on click, and a dark/light "shop sign" toggle.
This work is licensed under the MIT License.
This content originally appeared on DEV Community and was authored by Naman Dhakad
Naman Dhakad | Sciencx (2026-08-02T17:08:22+00:00) Tonkotsu ramen in CSS. Retrieved from https://www.scien.cx/2026/08/02/tonkotsu-ramen-in-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.