A GIF movie capture of an HTML/CSS animation of a coffee cup with blurry steam emerging on a dark purple background. All elements are set in HTML/CSS.

Creating steam in CSS

Think hot, delightful, freshly brewed coffee

If you are a coffee lover like me, then the delicious and ambrosial waft of the first morning brew must captivate you in an infinite trance just as much as me.

And more so, trying to catch this ever-inspiring first morning aroma in form of a CSS animation will become a priority as a creative endeavor like no other.

Thus, I set out to render this mysterious coffee steam, using HTML & CSS , as a challenge to myself.

Creating steam in CSS is a conundrum

Before I delve into details, a quick summary. Rendering steam can be achieved, but it is finicky across browsers. Either the “div {filter: blur()} property is not aligning across browsers for consistency, or the “div {overflow: visible}” property is not supported in some.

However, Chrome and Firefox are my go-to browsers, and the files presented here work perfectly on these.

Setting the shapes for the cup and steam

All base elements for the cup are set in HTML. See CodePen for details.[1]