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.
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.

January 14th: Running, Loading, and Fusing

Head for the Hills

Watch your email address make a run for it in this imaginative Pen from Adam Kuhn, built with Splitting.js.

CodePen PRO

Unlock the full power of CodePen with features like private content, asset uploading, live view, and embed themes.

#CodePenChallenge: Peach Beach 🍑

The CodePen community took a bite out of the first week of the Color Palettes #CodePenChallenge! Check out our collection of Pens from week one, including Cassidy Williams' "Marching Macarons".

Creating Vector-Like CSS Illustrations

Ilithya shares a technique for "Creating vector-like CSS illustrations, an approach I use often to create most of my illustrations, making them resizable in a matter of seconds."

React for Beginners

It's time to learn React.js. With a focus on simplicity and readability, this course will have you building real time applications and dynamic website components in no time!

Some Incredibly Clever Layout Pens from CodePen (with bonus twists)

Our very own Chris Coyier shares great examples of grid and flexbox layout in this roundup post on Dev.to.

Linear Lemniscate

Louis Hoebregts creates pleasing pastel curves in this subtly interactive Pen.

CodePen Radio #205: The Most Hearted of 2018

Marie, Chris, and Cassidy look back on the most hearted content on CodePen in 2018.

Emerging Dropdown

"Using SVG line animation and a stroke transition to make a dropdown menu emerge from a button. The menu animates out from the button that opens it." from Mikael Ainalem, inspired by a Dribbble shot from Konstantin Sokhan.

Coalesce

A breathtaking collection of "coalescing GPU particle simulations" from Liam Egan.

ShuffleQueue Loader

A little bit of fresh loading delight from Chris Gannon.

Black Sun

An ominous canyon from CJ Gammon, inspired by Death Cab for Cutie's Black Sun lyric video.

Infinite SVG Triangle Fusion

"Triangles are created. Triangles are destroyed. And so on and so forth" from Rob DiMarzo. Check out the Pen's description for details on how the triangles combine and the hexagons connect.

CSS Grid: Recipe Layout

"My annual pen inspired from the Waitress musical has arrived!" a scrumptious slice of CSS Grid from Olivia Ng.