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 11th: Pixels, Particles, and Paintings

Fun with Pixels

massimo plops an image of the Justice League (although of course, it could be any image) and gives you a hover-powered fisheye lens you can configure.

​Build Your Own Technology Stack

This infographic from @softwareguild explains tech stacks through burgers. Yes, burgers!

Spinning Circles Animation

It's all done in a bit of head-scratching z-index-free CSS by Paul Grant.

Don't Lose Your Rainbowness

Sage advice by Matei Copot. Resizing the window a bit makes it extra rainbow-y, so don't miss that.

Vector Trophy SVG Animation

Cameron Fitzwilliam's faux rotation effect is eye-catching.

Build a Best Sellers List with New York Times & Google Books API

Andrew Bales shares a beginner-friendly tutorial demonstrating how to use the NYT API and the Google Books API to build a best sellers list.

Advent of Code 2017

Jack Rugile accepted the Advent of Code challenge, and he's gathering up his solutions and attempts in this color-coded collection.

Times of Day CSS Paintings

Pieter Biesemans translates Dribbble shots by Josh Warren into CSS in this gorgeous Pen.

"Bouncing Particles are Not Complicated"

...at least, not to Godje! His tutorial shows how to create a pleasing bouncing particle background with minimal JS.

CodePen Radio #154: Internal Documentation

We've recently changed what we're using for our internal documentation and notes, and in the process we had a chance to clean up and organize it in a way that makes way more sense.

Christmas Wishes

It's beginning to look a lot like Christmas on CodePen! Trisha Salas shares a Christmas scene built with CSS Grid and Particle.js.

A Little Revamp to External Resources

The external resources in Pen settings just got an update! Now it's easier than ever to search for a library. And, the search remembers your favorites, too!