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.

August 20th: Burritos, Fireballs, and Love

CSS Fireballs & Particles

A dazzling "Pure CSS animated scene in 3D" from Piotr Galor.

WooCommerce

WooCommerce is a flexible and powerful eCommerce open-source plugin for WordPress. There are 450+ plugins for it, enabling things like booking appointments, memberships, subscriptions, and tons more. We use WooCommerce at CodePen to sell t-shirts and hats, managing our inventory and handling fulfillment with a ShipStation plugin.

Deman Drawkcab

Writer, illustrator, and developer Ben Evans brings a short story to life in an interactive Pen. Scroll through to see the story unfold!

Experimental layouts with CSS Shapes and clip-path

Michelle Barker demonstrates the possibilities of shape-outside, shape-inside, and clip-path polygons in this detailed tutorial post.

Codepenhagen

Ryan Mulligan translates a Dribbble shot from Glenn Catteeuw into a lovely Pen with a punny title.

​​​Northwestern MS in Info Design+Strategy

Learn to use research and analytics to drive communication strategies and to translate complex data into compelling visuals and narratives.

Yeti 404 Page

Darin Senneff's animated yeti stumbles upon one of the scariest finds on the internet — the 404 page!

3 Ways to Create Angled Edges With SVG

Adi Purdila walks you through how to create an angled edge with SVG in this tutorial post complete with a screencast and embedded Pen demos.

The Play of Form

"Click to see some code play around with form within the shape of a heart rendered using SVG and some JavaScript" in this lovely Pen from Sten Hougaard.

#CodePenChallenge: Teach CSS

In the latest #CodePenChallenge, the community built some amazing Pens to teach CSS concepts, like this border-radius playground from Adam Kuhn. Check out all of the week two creations in our collection!

Revolving Hearts

"When more than one heart isn't enough", a CSS animation with a whole lot of heart from Misha Tsankashvili.

gTeam anniversaries - a Collection by CreateJS

The team at gskinner sure knows how to celebrate a milestone! Check out their collection of animated anniversary tributes to the folks on their team.

The Web is Made of Edge Cases

Taylor Hunt makes the case for resilient web design in this blog post that gets into some of the many types of edge cases your website will face.

Magic Burrito

"The feeling you get when you're waiting in line at Chipotle. Burritos are magical" from Cody Ogden.