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.

December 31st: Painting, Portraits, and Pastry

Dice Calendar

Get a look at the year ahead with this animated calendar from jakob-e, inspired by the LEGO Iconic Brick Calendar.

React for Beginners

It's time to learn React.js. With a focus on simplicity and readability, this course will have you building real time applications and dynamic website components in no time!

Parallax Self Portrait

Watch a portrait go from sketch to fully-realized drawing in this stunning animated Pen from Ryan K. Brown. Move your mouse over the finished image for a bit of lifelike movement.

#CodePenChallenge: Air

The CodePen community blew us away on the last week of the Four Elements Challenge! Check out our collection of Pens from the "Air" prompt, including "Windy Day" from Ivan Grozdic.

How I stumbled across a niche hobby I never knew existed: Drawing (and animating) in CSS

Kyle Wetton shares thoughts and demos from a skill-building journey into the world of CSS illustration and animation.

Gingerbread House (chrome desktop)

Beatrize Agustin wraps up the holiday season with a bit of front-end baking! Check out the sweet details, like the lighted trees in the front.

11/12: Paint on Mouse Move

"Animated a little drawing I did with parallaxing and 3D transforms :) She paints in rainbow brush strokes wherever your mouse goes" from Angela He.

SVG.js - Advent Calendar

Ulrich-Matthias Schäfer gathers a collection of Pens from the SVG.js advent calendar for 2018, demonstrating svg.js 3.0.

CSS Grid: Bingo Card

Take stock of your 2018 with this playful grid bingo card from Olivia Ng. Check out how the card layout swaps to a checklist in mobile view.

My 2018 on CodePen

Johan Karlsson shares a look back at a prolific year full of incredible demos (like "Noisy Lines"), meetups, and well-deserved accolades.

Swappy Radios

"An elaborate radio button animation" from Liamj. Click an option and watch the highlight switch places.

CSS is Awesome Animation in CSS

Vuild asks and answers an age-old dev question with CSS variables and calc in this delightful animation.

Pure CSS Reel-to-Reel

"Pure CSS reel-to-reel with working rewind, pause, play and rewind buttons" from Kevin Newcombe. Based on a Dribbble shot by Giac Gabrielli.

CodePen PRO

Unlock the full power of CodePen with features like private content, asset uploading, live view, and embed themes.