cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen

CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
The
All the can't-miss links.

Delivered straight to your email each week. Go Sign Up.

Add the feed to your favorite RSS reader and never miss a thing.

Sponsor a week and reach a large audience of designers and developers.

September 10th: Steps, Status, and Star Wars

Pacman Pagination

Chomp your way through the pages Pac-Man style with this clever pagination animation from Mikael Ainalem.

​Good things happen when work flows...

monday.com is much more than a communication tool! Manage every aspect of your workflow in one place.

Duplicate Word Finder

"A little productivity tool to help avoiding unintentional word repetitions in your writing" from Bence Szabo.

How to Create Pure CSS illustrations & Animate Them - Part 1

Front-end illustrator Agathe Cocco kicks off a CSS tutorial series with a smile in this step-by-step lesson.

​Jamf Now: Easy Apple Device Management

Jamf Now is a management solution for your Apple devices. We make management easy and affordable, so you can support your users; no IT required.

CSS Grid Calendar

Is there anything better than a nice, clean calendar? A refreshing grid concept by Mert Nerukuc.

A Complete Beginner's Guide to React

Ali Spittel shows you how to build a Facebook-style status widget from start to finish in this React tutorial, complete with embedded Pen demos.

CodePen Radio #189: Cassidy

Team CodePen introduces our newest member, Cassidy Williams. We talk all about her past before CodePen, including her amazing mechanical keyboard project!

#CodePenChallenge: HTTP Status 404

Let the CodePen community be your guide through the mysterious world of 404 pages! Check out the Pens from the first week the September challenge, including Christina Gorton's "Labyrinth 404".

How Many Steps Does It Take To Get From Me To You?

"Color Interpolation! Yay! More adventures with colors and math! And Vue.js, of course." from Jase Smith.

Star Wars Imperial Army's Product Slider!

Explore the dark side of shopping in this Star Wars themed slider. Responsive and animated thanks to Muhammed Erdem, design from a Dribbble shot by Eray Yesilyurt.

HyperMorph 3000™

"Remember the good old 90's, when morphing was the coolest thing ever?" Andreas Borgen morphs two photos together, Michael Jackson video style, in this fascinating Pen. Check out the comments in the JS panel for insight into how it's done.

At the Wall | Pure CSS Drawing

Jon Snow and the Night King prepare to battle it out in this stunning CSS illustration by Atanas Atanasov and his team.

Origami Cranes

A delicate origami crane from comehope. Hover over it to watch it grow into its form from a tiny triangle.