Jollof, Sunday Special — A Bowl of Jollof Rice in Pure CSS

charleseze322 — Sun, 02 Aug 2026 23:14:38 +0000

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

Jollof rice. Not just because it's food I grew up eating, but because

it's the dish that shows up at every party back home — the one pot
everyone fights over. I wanted the piece to have the mound of rice,
the fried plantain, a boiled egg, and the scotch bonnet pepper that
always ends up on top. If it doesn't have steam coming off it, it's
not done.

https://codepen.io/editor/Eze-Charles/pen/019fc4b4-610a-7bad-826b-5842f4812f36

Everything here is CSS — no images, no SVG art assets. The rice

texture is layered radial-gradients at different sizes to fake
individual grains, the plantain slices use inset box-shadows to get
that fried, slightly caramelized edge, and the plate has a speckled
glaze made the same way as the rice grains, just scaled up.

The part I'm most proud of is the steam — four blurred circles on a
staggered keyframe loop, each one drifting up and fading out at a
different delay so it never looks like it's repeating in sync.

What I learned: how much "texture" in CSS really just comes down to
stacking small radial-gradients at different scales and opacities.
No image, no canvas, just gradients doing the work.

Next, I want to try a second dish with more movement — maybe
something with visible liquid or a pour animation.

DEV Community: charleseze322

Jollof, Sunday Special — A Bowl of Jollof Rice in Pure CSS

Jollof rice. Not just because it's food I grew up eating, but because

https://codepen.io/editor/Eze-Charles/pen/019fc4b4-610a-7bad-826b-5842f4812f36

Everything here is CSS — no images, no SVG art assets. The rice