DEV Community

Cover image for 🎃 CSS Halloween — *Crypt-o-Crypt*
MD ARIFUL HAQUE
MD ARIFUL HAQUE

Posted on

🎃 CSS Halloween — *Crypt-o-Crypt*

#frontendchallenge #devchallenge #css

Frontend Challenge CSS Art Submission 🦇🎃

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

CodePen demo: https://codepen.io/mah-shamim/full/GgoBojo
Source code: https://github.com/mah-shamim/crypto-crypt.git

Inspiration

I built Crypt-o-Crypt, a spooky CSS art piece inspired by classic Halloween crypts and glitchy crypto aesthetics. I wanted to combine creepy stone textures, moody lighting, and subtle animated “glitches” to make a tombstone/crypt scene that feels both eerie and modern — like a haunted blockchain ledger 😅.

Demo

Embed (CodePen):https://codepen.io/mah-shamim/full/GgoBojo

Or view the live demo on CodePen. The repo contains everything if you want to clone and run locally:

git clone https://github.com/mah-shamim/crypto-crypt.git
Enter fullscreen mode Exit fullscreen mode

What I made

  • A full CSS-only scene of a crypt with stone arch, carved glyphs, flickering ambient light, and a subtle fog/particle layer.

  • Animations created with @keyframes for:

    • flickering torches / ambient glow
    • slow hovering fog
    • occasional glitching glyphs (translate + skew + opacity pulse)

  • Pure HTML + CSS (responsive-ish) — no JS required on the CodePen version.

Journey — process & learnings

  • Process: I sketched the layout first (arch, inner plaque, foreground stones), then built the structure with nested <div>s and semantic classes. I layered effects with pseudo-elements (::before / ::after) and multiple box-shadows to create depth without images.

  • What I learned:

    • How to use layered box-shadow + filter: blur() to fake depth and volumetric light efficiently.
    • Subtle animation timing makes the scene feel alive without being distracting — less is more.
    • Using CSS custom properties (variables) made it easier to tweak color palette and animation speeds globally.

  • Proud of: the glyph-glitch effect — purely CSS — which gives a small “crypto” nod (glyphs that flicker kind of like corrupted data).

Challenges

  • Getting a convincing stone look without images required careful shadow stacking and gradients.
  • Ensuring animations perform smoothly across browsers while keeping the HTML structure manageable.

What’s next

  • Add an accessible alternative (SVG fallback / aria descriptions) for screen readers.
  • Create an animated cover image (GIF or short MP4) to use on social / the Dev.to cover.
  • Extract the glyphs into a small webfont for more consistent rendering.

Files / repo notes

Repo: https://github.com/mah-shamim/crypto-crypt.git

  • index.html — demo scaffolding (CodePen uses the same markup)
  • styles.css — full CSS (variables at top for palette and timings)
  • readme.md — short instructions and credits

💀 Credits & License

Top comments (0)