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.

November 26th: Stories, Spiders, and Sheets

Pixel Art Moonset

Mustafa Enes uses the `image-rendering: pixelated` property on the canvas element to create this moonlit pixel art scene.

Jetpack

Jetpack brings a whole range of features to your self-hosted WordPress site. From realtime backups that keep your site safe (and make it easy to move!) to improved search results. From related posts to social media integration - it's a no-brainer plugin for people serious about making their sites better.

#CodePenChallenge: Tigers

Check out the Pens from week three of the November 2018 Animals challenge, including this "eye of the tiger" from jh3y.

Who's That Pokémon?

Guess the name of the Pokemon in Tiffany Choong's Pen, built with Vue and the PokeAPI.

Firefox Dev Tools CSS Survey

The Firefox DevTools team needs your help! Share your biggest CSS woes with us in this anonymous survey.

æther

Sean Free's spectacular simplex noise creation is amazing to look at, and the code behind it is just as fascinating!

CSS-Only Walking Dog

David Khourshid translates Artua's Dribbble shot of a perfectly perky pup into CSS in this adorable Pen.

Only CSS: Diorama Maker v1.0

Have you noticed those cool CSS dioramas in the picks lately? They're all built from this diorama template by Yusuke Nakaya. Grab a copy and make your own!

CodePen Radio #200: Challenges Redesigned

Chris, Klare, and Marie talk about CodePen Challenges, redesigning the page, and how using Figma helped everyone get involved in the redesign.

Observe a Story

"Exploring options to animate the great logo for the McDonald Observatory in West Texas" from Dan Wilson.

Spider-Verse: Morphing

"With the coming Into the Spider-Verse animation movie coming up, I got inspired to do this little morphing!" a bit of GSAP SVGMorph magic from Andy Pagès.

#codevember 12/2018 — bread

Noel Delgado recreates Jonas Mosesson’s "Moody Foodies" animation using SVG and GSAP for the #Codevember "bread" prompt.

CSS Grid: Periodic Table

A Grid experiment from Oliviale. Hover over the "elements" for more details on how the time breaks down.

Sheets API Specials Menu

Adam Quinlan shares an interesting idea for a restaurant website — a menu the owner can update through Google Sheets!