It’s time to start week three of the December “Four Elements” challenge!

Last week, the CodePen community made it rain for the Water prompt. Check out the Pens in our #CodePenChallenge: Water 💧 collection.

December’s Challenge Sponsor: WooCommerce

WooCommerce is the most popular eCommerce platform on the web. Use WooCommerce to sell anything from luxury mattresses and cupcakes, to date-driven sales like kayak lessons, to one-off items like beautiful hand-crafted jewelry.

Week Three Prompt: Fire 🔥

We’re playing with fire this week! Let’s set CodePen alight with Pens inspired by the fire element.

Your Challenge

Fire up a Pen and set it aflame! Light a candle, throw a fireball, or show us some fireworks.

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag cpc-fire. We’ll gather those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).


  1. ‘Tis the season for candles, like in Sarah Drasner’s “Flame” and Yule Logs, like Alex Bergin’s.
  2. Create pixelated fire, like the kind Fire Mario throws in Dave Judd’s Pen.
  3. Light up the sky with fireworks like the Pens in our “Fireworks!” collection.


  1. Learn how to create a glowing, crackling fire effect with CSS animations from HackerNoon.
  2. Get that 8-bit fire look with a pixelated fire effect tutorial from
  3. Did you know there’s a fireworks.js ? Of course there is!