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.

October 29th: Squiggles, Sketches, and Stars

The Magic Work Button

"Sometimes it seems friends, family and even clients seem to think I own one of these and that because I use computers I just press a button and stuff gets magically done!" from Chris Gannon.

Blazing fast eSign integration

Enterprise security. Time-saving workflow. Developer-friendly & flexible. See why developers love HelloSign API and how it can automate your document processes.

Little Witch

Agathaco's brews up a charming animated CSS Halloween scene with lots of delightful little details.

#CodePenChallenge: Trick-or-Treat šŸ¬

We wrapped up the Halloween challenge with a good old fashioned trick-or-treat. Check out the Pens from the challenge, including Maxime Nory's adorable candy-loving ghost!

Level up your JS error monitoring

Automatically detect JavaScript errors impacting users. Get comprehensive diagnostic reports & debug in minutes. Try it free.

CodePen Radio #196: Rotating Support

We've been trying a rotating support schedule at CodePen to involve other members of the CodePen team with support. Marie, Cassidy, and Chris are here to talk about why we're doing it, and how it's going so far.

Literary Constellations

Nick Piesco adapts Nicholas Rougeux's "Literary Constellations" to SVG: "This version works on your literature, taking the value of the input and generating an SVG ā€˜constellationā€™. "

Responsive CSS 3D Contact Form

Mahvash Fatima shares a clever contact form with some major Jenga vibes.

Using `async` in Pens

How to enable enabling async/await in your Pens with Babel polyfill.

ZIM Zinkle - Animated Squiggles on Blob Path

Dan Zen demonstrates Zim.js with these animated squiggles "kind of like a digital slinky".

Samarth Gulati on CodePen

Samarth Gulati shares the SVG result of #plottertwitter experiments on CodePen!

Sketchy Border Test

"Using 8 border-radius values can be pretty dope. This example shows how using it on the element and its ::before pseudo element can create a sketchy look and feel" from Andy Bell.

The Pythagoras Tree

"All things are numbers...." from Gerard Ferrandez. Refresh or resize the browser to see the tree transform into a new shape.

SCSS 3D Text Mixin

Liam Egan shares "a simple SCSS mixin that creates 3D blocky looking text with text-shadows".