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.

January 8th: The Practical, The Magical, and the Most Hearted

The Most Hearted of 2017

It's that time of year again! Look back on the most hearted Pens, Posts, and Collections of 2017 and get inspired for 2018.

Manage and Protect Apple Devices​ - Easy!

Stop wasting so much time setting up, updating, and managing your Apple devices and do more of what you love with the time you save. Get started with Jamf Now!

Loading Title

When every letter is its own element, it opens up interesting typographic animation possibilities! Jason Jacobson made these letters stagger in scale. This would be a fun one to fork and play with different animation possibilities.

12 Grimmauld Place

Answer some Harry Potter trivia and reveal Sirius Black's secret home in Kyle Stark's magical Pen. And don't worry, there's a handy answer key for Muggles!

Video + Blend modes = Cool modal

Jamie Coulter makes an inkblot modal spread across the screen in this clever combination of video and CSS blend modes.

Fantastic Pens and Where To Find Them

Mandy Michael just started a series of Medium posts of her favorite Pens with a nice selection of interesting new work and all-time favorites.

Download Button

"A playful springy download button w/ light jQuery and CSS animation" by Adam Kuhn.

Winter Tidings: Snowflake Generator

Staak zooms in on one of the tiny details from their epic Winter Tidings Pen and shows how to generate random, gorgeous snowflakes.

My 2017 on CodePen

Johan Karlsson looks back on a highly productive year on CodePen (129 public Pens! 121 private Pens!) in this roundup post.

Tetris Loader

Charlotte Joy levels up the loader experience with this Tetris-inspired animation.

CSS Grid + Flexbox Solving Real-world Problems

Peter Mouland shares the process behind developing a responsive design to work with grid and flexbox in browsers that support them, along with some final touches that make it compatible with Safari and IE11 too!

In the Deepest Ocean

Little neon sea creatures swim and glow in Scorch's lovely aquatic Pen.