css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
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.
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.

October 2nd: Time, Perspective, and Expansion


Liamj animates Penguin's minimalist take on the ominous horror classic Jaws.

Build Faster. Test More. Fail Less.

Automate the software development process using continuous integration and delivery so you can focus on what matters, building great things.


Warm yourself by the glow of Short's charming animated campfire.

Time Series 2: Typographic Clock

Peter Norton is on a ten-part exploration of time, and if part 2 is any indication of the future, it's going to be quite a trip!

Cloudinary's “Neural Artwork Style Transfer”

Try out Cloudinary's new neural artwork style transfer tool on CodePen! You can even enter your creations in their image contest (ending October 4, 2017).

Mozilla's Introduction to CSS Grid Layout

Want to get your head around grid layout? Check out Mozilla's interactive tutorial, featuring plenty of CodePen demos you can learn from and fork.

Full-Width Panel Expansion, CSS only

"Using CSS Vars to progressively enhance expanding panels with animation" by Shaw.

Star Wars | Polygons of the Galaxy IV

"The fourth piece in the ongoing Polygons of the Galaxy series" by Lloyd James.

CodePen Radio #144: Integrating Braintree

We just brought back PayPal as a payment option, and we used Braintree to do it! Marie and Alex are on to talk about the how and why of adding a new payment provider to CodePen.

Only CSS: Trick Art

Yusuke Nakaya plays with perspective and your perception in this clever CSS illusion.

Confettis with SCSS and WAAPI

Who couldn't use a little confetti? Let agathaco shower your monitor with a bit of color, and peep the source code to see how they drift and flutter.

Corner Border Link

Vian Esterhuizen uses a slick CSS trick to animate these photo-corner style border links. Click the "How?" button to reveal how it's done.