Back to feed
Coding

Jollof Rice in Pure CSS

DEV Community
Read original
Jollof Rice in Pure CSS

EDITOR BRIEF

This CSS art piece recreates a bowl of jollof rice with plantain, a boiled egg, and a pepper, all without images or SVG assets. The artist says the rice texture, plate speckles, and fried edges are made with layered gradients and box shadows, while the steam uses blurred circles animated on different delays. They also reflect that CSS texture can come from stacking small gradients at different sizes and opacity.

INSIGHTS

This is a good example of how basic CSS tools can create realistic visuals. A useful next step is to experiment with radial gradients and keyframe animations to make your own food art or simple motion effects.

CodeFriends courses that build on this story. Practice in the browser with nothing to install.

COMMENTS

0/40
0/2000

Loading comments…