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.

May 7th: Gum, Gauntlets, and Ghibli

The Bubblegum Atom

Liam Egan's experiment with "different shape generation, shadowing, reflection and shading models (fresnel)" yields this delightfully chewy Pen.

Join the free beta

The new Tower Git client is packed with awesome new features. Get early access today!

fruit party popper

Who doesn't need a little more fruit in their life? Click the "Pop" button in Anya Melnyk's Pen to throw a little party in your browser.

Retro Games Challenge

Joe Gaffey looks back at his work during the April #CodePenChallenge. He did at least one Pen for every week of the Retro Games theme, and shares what he learned along the way!

#172: Andy Hullinger - CodePen Blog

Marie is joined by Andy Hullinger to talk about the front end development course he teaches, and how he uses CodePen to help his students make their first steps into programming.

Infinity Gauntlet (Single Element)

Jon Kantner translates Matt Shearsmith's Dribbble shot into CSS (with a little extra twinkle on the gems) in this single-div Pen.

Interactive SVG mask w/full screen image

Hover the mouse around to reveal the color in the image, or hold and release the mouse button to expand the mask. A bit of fun with SVG masking from Craig Roblewsky.

Yub Nub

May the Fourth is always strong on CodePen, and this year was no exception! Check out Adam Kuhn's charming animation of a Ewok Dribbble shot by Richard Perez.

Aggretsuko Animated MorphSVG

Don't let the business attire fool you! Laura Culham animates everybody's favorite death metal red panda with Greensock's MorphSVG plugin.

The Solar System (To Scale)

Travel the solar system in scaled-down realtime in Darryl Huffman's Pen. Things start to get weird around Jupiter but... that probably happens in real life too.

Soot ball [Ghibli CSS Series]

Chilli con Code is making a series of CSS characters from Studio Ghibli films, including this adorable soot ball from Spirited Away.

It’s a Feature, not a Bug - CSS Grid Demo

Bug out on this media query-free demo of CSS grid from Stacy!

You should probably learn React.

It is extremely popular for a reason: React is a good fit for the fast, interactive, state-driven websites we're often asked to build as front-end developers. CodePen recommends this course by Wes Bos to upgrade your JavaScript skills.

Interruptions

The Vera Molnar tributes continue! Tim Severien takes on her "Interruptions" in this interactive Pen. For more Molnar, check out last week's Spark for Scorch's interpretation of (Dés)Ordres.