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.

February 5th: Wings, Worlds, and The Infinite

CodePen World's Fair

Coming to Morgan MFG inChicago, May 30 - June 1! Sign up to get notified about the event, and resize the page a couple times in your browser for a little extra fun.

Secure your Apple devices at work

Jamf Now helps make complex tasks including Apple device setup, security, and management, simple and quick. Focus on your work, rather than your managing tech!

Only CSS: Infinite Steps

"up, up, never give up!" on this stunning staircase from CSS animation virtuoso Yusuke Nakaya.

Lightning Fast Filtering in JavaScript

Chris Smith shares "a technique for filtering large sets of data quickly in a web page" in this post about his Pen.

The "Goo Filter" Illustrated

Chris Gannon demonstrates all the parts that go into a "goo" effect in Greensock. "The result is a liquid effect - every time two object come close to each other their blurred edges touch but because those edges have their opacity boosted to full they appear to join together like liquid."

CodePen Radio #159: Bugs

In this week's episode, Rach and Marie talk about a software inevitability: bugs! We talk about diagnosing them, prioritizing them, and the best part — fixing them.

How to Hand Code SVG

Learn how to hand-code SVG through practice, creating six handy icons from scratch in this tutorial by Kezz Bracey.

This Alter World

"How thankful am I for this alter world where my dreams dwell". Slip into a reverie with this gorgeous Pen from Gerard Ferrandez.

Keeping aspect-ratio with HTML and no padding tricks

Noam Rosenthal shows how to combine SVG and CSS grid to make a DOM element keep a fixed aspect ratio in this helpful blog post.

CSS Toucan

Clara Song translates a Dribbble shot by Ty Wilkins into CSS in this delightful Pen.

From the Ashes: New Year, New Me

"SVG animation using GreenSock for Creative coding club's January theme New Year, New me" from Christina Gorton.

Escher's Pegasus

"This SVG tessellation is a reproduction of one of Esher's famous works" by Zachary Skalko.