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.

September 25th: Islands, Roots, and Summer's End

End of Summer

"There goes another summer. Made a city with a sunset in pure CSS" by Katherine Kato.

The Web Developer Bootcamp

The only course you need to learn web development- HTML, CSS, JS, Node, and more!

iPhone Notch Scroll 2

David Baker tackles the dreaded Notch in this Pen, inspired by Vojta Stavik's viral tweet.

SVG Animation - Island

"An animated illustration made with code_ This animation is part of the trüfffle series, made up of a series of animation for the web" by Issey.

Untitled Slider

An intriguing take on a sliding-doors reveal, and a "small experiment which quickly turned into something more", by Nathan Taylor.

Making of The Danger Crew Battle Demo

Drew Conley is back with another behind-the-scenes look at the development of his browser-based adventure RPG, The Danger Crew.

CodePen Radio #143: Optimizing a Database

Chris and Tim Sabat talk about challenges of a growing database – keeping lookup times down, paging issues, and dealing with metadata.

Exploring Animation And Interaction Techniques With WebGL (A Case Study)

Karim Maaloul writes for Smashing Magazine about the techniques he used to bring delight and life to the animated WebGL characters in his Moment of Happiness series.


"jQuery makes writing browser JavaScript so accessible, it's easy to skip over some of JavaScript’s core concepts. Fizzy School covers these concepts so novice developers can fill in the missing areas in learning JavaScript and jQuery", from David DeSandro, creator of MetaFizzy.

DPDK + Party!

The team at digital agency DPDK put together a collection of stunning renditions of their signature plus symbol model, featuring work by Penno, Hornebom, and Zadvorsky.

Hearthstone Style Card Hover

"My take on a HTML/CSS version of card hover effects similar to Hearthstone." by Jack Rugile.


"A peaceful animation of intertwined roots. You can control the animation by scrolling/dragging/swiping up and down", By Louis Hoebregts.