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.
Top comments (0)