This content originally appeared on DEV Community and was authored by Sooraj (PS)
This is a submission for Frontend Challenge - Halloween Edition, CSS Art.
Inspiration
I wanted to capture the cozy-but-spooky feeling of a Halloween night, a glowing jack-o’-lantern sitting under the moonlight.
My inspiration came from classic animated Halloween scenes where the light from the pumpkin flickers softly, giving life to the night around it.
Instead of relying on images or SVGs, I wanted to see how far I could push pure CSS gradients, pseudo-elements, and keyframe animations, to build something atmospheric and alive.
Demo
Journey
This started as a simple pumpkin, but once I nailed the shape and glow, I couldn’t stop adding details, a stem with gradient lighting, a pale moon with craters, a soft floor reflection.
A few highlights from the build:
• The pumpkin is entirely layered using CSS ellipses and gradients (no images or clip-paths).
• CSS variables helped me keep the color palette warm and cohesive.
What I learned:
• Layering gradients with opacity creates depth — even in flat, 2D art.
• You can achieve a surprisingly cinematic vibe with just a few lines of well-placed CSS.
Next, I’d love to extend this into a looping CSS Halloween card, with fog drifting, bats swooping, and the candle glow subtly pulsing in sync with the scene’s atmosphere.
👻✨ Pure CSS can be magic when the lights go out!
This content originally appeared on DEV Community and was authored by Sooraj (PS)
Sooraj (PS) | Sciencx (2025-11-08T23:57:37+00:00) Moonlit Halloween: A CSS-Only Jack-o’-Lantern Under the Night Sky. Retrieved from https://www.scien.cx/2025/11/08/moonlit-halloween-a-css-only-jack-o-lantern-under-the-night-sky/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.