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.

January 22nd: Secrets, Seasons, and Going Serverless

Silhouette Zoom Slideshow

Mikael Ainalem uses different SVG clipPath's to change between these beautiful photos.

Craft clean, responsive emails with HEML

SparkPost's HEML is an open source markup language for building responsive email. HEML makes building emails as easy as building websites. Try it out!

Fancy Loading

A nice @keyframe animation from Yariv Fruend involving drop shadow filters, text strokes, variables, pseudo elements, and transforms.


Dissimulate is back with a "wobbly physics simulation". Press 1, 2, or 3 for motion and gravity effects.

Animated CSS Seasons

Agathaco translates a charming illustration tutorial from Envato into an animated CSS scene.

Photo Filter

Erdem Uslu builds a photo filter app in React. Play with the sliders or pick a pre-built filter to change the image.

The First CodePen Meetup in Nigeria

The very first CodePen meetup in Africa happened in Nigeria in January! The event organizer, Goodness Kayode, writes about the event and shares photos in this in-depth post.

Grid Experiment No. 4

Jules Forrest builds an appetizing recreation of the Phonecian Diner menu with Grid.

CodePen Radio #157: ETL

On the latest episode, Jake is on to talk about the planning and design that went into our overhaul of our email system at CodePen. Sponsored by Porkbun!

Easing and Brownian Motion

A tutorial from Scorch on "the concept of building a simple particle setup that leads to a natural-looking motion".

Carousel Lock Interface

A super-secret lock screen — use the sliding carousels to enter the super secret code. Built with Flickity by Jack Rugile.

How to Build a Serverless Blog on CodePen

Kitt Hodsden takes you through how to build a "serverless" blog right here on CodePen, with Firebase!