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 3rd: Magic, Mountains, and Maps

Ocean Current

Sea plants bob and wave in a colorful current in this lovely canvas Pen from Thibaud Goiffon. Move your mouse around to change the color and direction!

​Reinvest Your Time With HelloSign API

G2 Crowd says HelloSign's API is 2x faster to implement than any other eSign provider. What are you going to do with all the time you save? Try it free Today!


Sweet end of summer vibes from Alex Goff in this subtly animated Pen.

#CodePenChallenge: Teach Design

The CodePen community wrapped up the August challenge with style. Check out the Pens from "teach design" week in our collection!

Art + Science of Product Design

A picture is worth a thousand words. Learn why design should be every product person's superpower. Watch the webinar!

CodePen Radio #188: Feature Testing

Klare and Marie talk about how new features get tested at CodePen - including our latest tests on pinned items and a redesigned sign up page.

SVG/Stroke Animation

A little bit of animated typographic inspiration from Mansoour.

Pure CSS Magic Trick

Alvaro Montoro amuses with a a bit of CSS sleight of hand in this magical Pen.

A quick taste of ".map, .filter, .reduce "

"Explained by making fruit salad". Anders Schmidt Hansen chops up the basics of these JavaScript methods into bite size pieces in this tutorial within a Pen.

Animated 3D Insta Washer

Amil takes a new approach to a photo filter in this clever combination of the Instagram logo and a washing machine.

The Art of CSS Illustrations

"Almost all images, designs, drawings are made up of simple shapes, lines and mixtures of colors, depending on the subject. CSS allows the developer to place different divs/elements on top of each other." an introduction to the basics of CSS illustration from Conner Luzier.


"React diffusion being used as a bump map" to create an eerily organic scene in this hypnotic Pen from Lian Egan.

Page Proportions as Musical Intervals

"A sonification of the section on page proportions from Robert Bringhurst's 'The Elements of Typographic Style'" from Tero Parviainen.


Samarth Gulati recreates the intricate lines of the human iris with JavaScript in this gorgeous Pen.