DEV Community

Cover image for Frontend Challenge - Halloween Edition: The Smiling Jack-O'-Lantern 🎃
MakendranG
MakendranG

Posted on

Frontend Challenge - Halloween Edition: The Smiling Jack-O'-Lantern 🎃

#frontendchallenge #devchallenge #css

Frontend Challenge CSS Art Submission 🦇🎃

This is a submission for Frontend Challenge - Halloween Edition, CSS Art.

For my CSS Art entry, I chose the most iconic symbol of the Halloween season: The Smiling Jack-O'-Lantern.

I wanted to capture the look of a pumpkin that has been freshly carved and lit, focusing on the contrast between the rough, dark orange rind and the bright, pulsing yellow-orange light spilling from the carved face. The goal was to achieve a sense of depth and glow using only CSS, making the pumpkin feel three-dimensional and truly lit from within.

I aimed for a classic, slightly mischievous expression—a friendly but still spooky smile to welcome the trick-or-treaters.

🖼️ Demo

Here is the result of my CSS Jack-O'-Lantern!

🗺️ Journey: Mastering the Glow and the Shape

This project was a fantastic exercise in pushing the limits of CSS shapes and shadows.

The Shape Challenge

The first hurdle was getting the pumpkin's organic shape right. I used the following trick to avoid a perfect circle:

.pumpkin {
  /* This gives the pumpkin an intentionally squat, rounded-off oval look */
  border-radius: 50% / 60% 60% 40% 40%;
}
Enter fullscreen mode Exit fullscreen mode

This custom border-radius syntax allowed the top and bottom to curve differently, giving it a more natural, slightly flattened pumpkin look. The forward slash notation (/) is the key—it separates the horizontal radii from the vertical radii, letting me create that characteristic pumpkin silhouette.

The Lighting and Glow

The most satisfying part was creating the illusion of internal light without using an actual image or complex rendering.

  1. Inner Depth: A dark inset box-shadow was applied to the main .pumpkin element to simulate the ridges and depth of the pumpkin's rind, giving it that carved-out, hollow appearance.

  2. The Light Source: The "cut-out" face elements (.eye, .mouth) were the real magic. I gave them a bright yellow-orange background color (#ffe568) to represent the glow, then used multiple, layered box-shadows to create the intense, focused light beam effect you see radiating from the carved holes:

   box-shadow: 
     0 0 10px 5px #ffcc00, 
     0 0 20px 10px #ff9900;
Enter fullscreen mode Exit fullscreen mode

  1. Shape Carving: I used clip-path to create the triangular eyes and the jagged, toothy grin that's essential to any proper jack-o'-lantern. The mouth's polygon creates that classic carved-pumpkin tooth pattern.

  2. The Stem: A simple pseudo-element (::before) positioned at the top creates the green stem, adding that finishing touch of authenticity.

What I Learned

I learned just how powerful combining border-radius with custom percentage values can be for moving beyond basic geometric shapes. More importantly, this challenge highlighted the creative utility of the box-shadow property—it's not just for dropping shadows on the ground, but for creating light sources, internal depth, and atmospheric effects when used with multiple layers.

The clip-path property also proved invaluable for creating irregular, organic shapes like carved-out faces. It's an incredibly flexible tool for CSS art that I'll definitely be using more often.

What's Next

If I had more time, I would love to enhance the scene by:

  • Adding a subtle pure CSS flickering animation to make the glow pulse like a real candle flame
  • Creating a ground fog effect that creeps up around the base of the pumpkin using blur filters and gradient animations
  • Incorporating a spooky twilight sky background with stars and maybe even a CSS moon
  • Adding more pumpkins with different expressions to create a whole pumpkin patch scene

Thanks for checking out my submission! Happy Halloween! 🎃👻

#Halloween #CSS #Frontend #WebDev #CSSArt

Top comments (0)