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.

This week: Pudding, Puzzles, and Props

CodePen: Now with More Sidebar

We've just released a big UI change to CodePen! Here's what's new in the sidebar.

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: Earth

Last week we kicked off December's "Four Elements" challenge with the prompt Earth. Check out the Pens from the challenge, including Luciano Felix's "Earth - The Element of Substance".

Tree

"Nothing warms the soul in the midst of Winter quite like a laptop trying to render a collection of 3d rotation animations". A bit of holiday cheer from Dan Wilson.

Fullstack Advanced React & GraphQL

Join over 10,000 other developers learning to build Full Stack JavaScript Apps with React.js and GraphQL in Wes Bos' new premium training course.

A CSS Venn Diagram

Adrian Roselli combines CSS shapes, custom properties, and grid to build a venn diagram in this tutorial post with embedded Pens.

CodePen Radio #202: Remote Days Off

Cassidy, Alex, and Marie talk about the unique challenges of unplugging from remote work when you're taking time off, plus how they "reconnect" and get back to work.

Watch faces w/ React's Render Props

jh3y demonstrates React's render props technique with these Fitbit-style "Watch" components.

Sliding Puzzle Game - Animated CSS Grid

David Darnes brings the infuriating fun of the classic sliding puzzle game to the browser in this playable Pen.

Generative Artistry Visualisations

Ruth John shares a collection of amazing audio visualizations based on generative artistry. Press play in any of the Pens to watch it move to the music.

Banana Rain

"It's raining bananas. Move your mouse and click to repel them!" Built with EaselJS StageGL by the CreateJS team.

Christmas Pudding Slider

A super-sweet holiday slider concept from Chris Gannon.

Tiny Explorer

Explore a world of fantasy landscapes and save .jpg snapshots of your favorites in this Pen from just rachel.

Pantone Colors: 2000-2019

Browse through 19 years of Pantone's "Color of the Year" selections in Jaymie Rosen's Pen.