Uploaded June 2023 | Updated September 2026, 1 hour ago

---

A collection of stunning CodePen demos that illustrate how you can create an amazing, interactive illustration with a few lines of well-crafted CSS.

🎨 Demos
1. CSS Only Fire by Simon Goellner: codepen.io/simeydotme/pen/PoyzbPM
2. Dripping by Amit Sheen: codepen.io/amit_sheen/pen/jOeGzBv
3. 100% 3D CSS + HTML Render by Jane Ori: codepen.io/propjockey/pen/KKGQpdK
4. Copypaste Apple Keyboard by Jon Kantner: codepen.io/jkantner/pen/ZEqKgWJ
5. CSS Rollin' Road by Jhey Tompkins: codepen.io/jh3y/pen/abRxZJE
6. OnlyCSS: Low-poly Train by Yusuke Nakaya: codepen.io/YusukeNakaya/pen/PoybbMY
7. Flying Through Hexagons by Amit Sheen: codepen.io/amit_sheen/pen/OJBwPgy
8. 3D Walkman by Ricardo Oliva Alonso: codepen.io/ricardoolivaalonso/pen/RwBZMGB
9. Gradient Art by Oscar Saharoy: codepen.io/oscarsaharoy/pen/BaqEEBj
10. 3D CSS Wanderer above the Sea of Fog by Alvaro Montoro: codepen.io/alvaromontoro/pen/GRYzepV

📖 Chapters
00:00 Intro
00:18 CSS Only Fire
01:09 Dripping
01:39 100% 3D CSS + HTML Render
02:48 Copypaste Apple Keyboard
03:24 CSS Rollin' Road
03:56 OnlyCSS: Low-Poly Train
04:21 Flying Through Hexagons
04:55 3D Walkman
05:20 Gradient Art
06:00 3D CSS Wanderer above the Sea of Fog
06:51 Conclusion

Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com

Course Mastering Prettier & Stylelint
🔥 Learn everything about best linting tools while supporting CSS Weekly: masteringlinting.com
🏷️ Use coupon code YOUTUBE15 to get an additional 15% off on the already discounted, pre-launch price.

Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly

Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor

- Zoran Jambor
#css #cssart