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.

June 5th: Fireballs, Meteors, and Orbs

Simple Bodymovin Demo

Kittons demonstrates the kinetic magic of Bodymovin in this deceptively simple Project.

66 "snack sized" videos covering everything about ES6

The JavaScript world has fully embraced ES6, and there is a lot to love about it. It's time to make sure you're leveled up in all the new syntax and possibilities. Pick up Wes Bos' course and you'll be all set. Oh, and remember you can practice your ES6 stuff right in CodePen!

Using CH Units for Typographic Design

"Showcasing how ch units work and some of what you can do with them is a typography focused fluid layout" - from MadeByMike.


While playing around with shaders, clindsey created this mesmerizing fireball.

CodePen Radio #132: Jag Talon

On the latest episode of CodePen Radio, the team talks to Jag Talon from DuckDuckGo! Jag tells us about how CodePen helped him learn CSS for his job and how he's using Projects to redesign his podcast's website.

Pow! CSS only SVG animation

"Animating an SVG using only CSS, Why? Why not!" by Kyle Henwood, inspired by a Dribbble shot by Fraser Davidson for Cub Studio.

Object Fit

"Object-fit cover for background videos. It's a new CSS property for sizing background videos like background images" - from Dylan Macnab.

The Difference

CodePen's master of surrealism Gerard Ferrandez revisits his popular work "What Power". For an especially weird treat, check this one out in the grid view on Gerard's profile page.

Glowing Meteor

A cheerful meteor hurtles through space in Marjo Sobrecaray animated recreation of a Dribbble shot by MBE.

Audio Visualizer2

Upload an mp3 file into Misaki Nakano's Pen and watch the orb pulse and rise along with the music.

Siphon and Gravity

"Each line is attracted by the center in rotation" in Jeremie Boulay's swirling siphon. Open up the dat.GUI controls to play around with the effect.

CSS Clip-Path Masks with Custom Properties as API

The images in Stas Melnikov's gallery have cool frames around them, and cleverly animated hover states, too!