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.

August 21st: The Sun, The Moon, and Love

Eclipse Inspired Pens

We rounded up the latest eclipse-inspired Pens — like Michal's interactive rendition — and some classics from the past in our blog post.

Get a free .design domain name

CodePen subscribers can get a totally free domain to use for their portfolios, side projects or any other project instantly.

Mr. Funshine

A cheerful experiment with GSAP transitions and cursor positions from Adam Kuhn.

CSS Telescope

Cassidy Williams' beautiful bronzed telescope illustration is based on a Dribbble shot "Scope" by Nick Kumbari.

CSS-only Directionally Aware Hover

"Using :hover and the sibling selector (~), we can apply different styles to elements based on their position. Removing the visibility transition gets rid of the previous element's ghost for a cleaner slide-in with no slide-out". By Giana.

Only CSS: Music Conductor

1, 2, 3, 4, 5, 6, 7, 8! May Yusuke Nakaya's Pen lead you to making beautiful music?

Custom Color

Ever needed a custom-colored underline that can span multiple lines? Will King demonstrates one way to do it!

Create A Basic Portfolio Filtering System

In this Post, Brian Haferkamp goes into detail on how he created the basic framework for a filtering system that he uses on his own portfolio site.

Eric Thayer on CodePen

It's always fun to see a creative custom profile page on CodePen! Eric Thayer's combines subtly skewed details with oversized showcase thumbnails to great effect.

The Dark

Two deer watch rising embers in an eerie darkness in Mario Duarte's Pen.

We Went and Built an Image Duotoner

Chris Vasquez shares the story (and CodePen demo) of a micro-product he and Kimberly Robbins built for AWeber.

Love in Hearts

"Little floating hearts to remind us of what's important", from Tiffany Rayside.