This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art
Inspiration
Nothing says comfort like a piping hot cup of cutting chai on a rainy monsoon afternoon in India. Listening to the pitter-patter of raindrops against the window while soft, slow music plays in the background, paired with a plate of crisp pakodas, sizzling samosas and a hot cup of tea (adrak wali chai (Ginger Tea ) —it’s pure bliss.
I wanted to capture that nostalgic, warm atmospheric vibe entirely using HTML and CSS. From the rich gradient of brewed tea and gentle ripples in the cup to the soft wisps of steam rising against the rainy backdrop, this is a tribute to India's favorite monsoon ritual!
Demo
Codepen:
Journey
Building this piece was all about mastering fine visual details and CSS animations:
Layering & Shapes: Creating the teacup, saucer, and interior liquid surface using carefully placed border-radius, box-shadow, and radial-gradient properties to achieve realistic depth and lighting.
Steam Wisps: I created subtle steam animation keyframes (@keyframes steamRise) using soft radial gradients and CSS filter: blur() to give the steam a naturally diffused look as it dissipates into the air.
Surface Ripples: Adding delicate, looping CSS animations to simulate gentle ripples on the tea's surface.
What I Learned & What's Next
Fine-tuning the animation timing and keyframe delays was key to making the steam and ripples feel natural rather than mechanical. Next, I’d love to add interactive elements—like hover effects that react to cursor movement or toggleable light/dark themes!
Top comments (0)