CodePen is a fun playground where web developers create amazing effects using mostly HTML and CSS, with a touch of JavaScript here and there. Check out these 10 cool demos that show off pure creativity!
1. CSS Only 3D Tagcloud V2 by Niklas Knaack
Picture a spinning 3D ball packed with tags for tools like React and Vue.js... It keeps rotating forever. Hover to stop it, light up a tag, or spin it around.
2. CSS Only Navigation with Rotating Text Hover Effect by Chris Bolson
Buttons morph on hover: text shrinks as icons swell, uncovering spinning words on SVG paths. They twirl forever with clever delays, which works on keyboard focus too.
3. 3D Wave Animation by HighFlyer
Hover over image panels, and they ripple like a 3D wave! The one you pick jumps forward in full color. Click to zoom it big smooth moves with CSS tricks for that pop-out feel.
4. Collapsible :has( ) Gallery | CSS Only by TheMOZZARELLA
This gallery pops open with fading effects that stagger like a wave. Hover on one pic to make it grow while others shrink, uses a smart CSS trick called :has().
5. Bouncy Menu Hover Effect (with Anchor Positioning) by Temani Afif
Menu buttons spring to life with bubbly circles that grow and bounce on hover. It's like elastic playtime for your nav bar powered by CSS anchors and animations.
6. CSS Only 3D Image Carousel by Niklas Knaack
Again with Niklas Knaack, a twisty 3D slider full of building photos, complete with shiny reflections and glows when you hover. They start in black-and-white but burst into color on touch pauses when you linger.
7. Animated Navigation List by Alvaro Montoro
Social medias slide in with a 3D twist, glowing and shadowing on hover. It's easy on the eyes, skips animations if you prefer no motion, and focuses on accessibility.
8. Font Weight: CSS Animation by Stijn Van Minnebruggen
Watch "DONOTFOLD" throb like a heartbeat, getting thicker and thinner in waves. Uses a special font that changes weight.
9. Text Circle Animation (CSS Only) by Stijn Van Minnebruggen
Van Minnebruggen also has a cool Codepen demo, words whirl in a circle, spinning and tilting as you scroll for a wild 3D vibe. Delays make it smooth, with backups for older browsers, all driven by scroll and CSS animations.
10. Hamburger (Literally) by Jesse Couch
A squishy burger icon that bursts apart on click—buns spin, toppings fade! Click again to rebuild it.
These are just 10 of the amazing demos that prove how a few lines of code can spark big wow moments in web design. And in the end, what's your all-time favorite CodePen demo? And what other awesome ones have you spotted? Share it in the comments.
Top comments (0)