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.

May 21st: Mobiles, Motion, and Motels

#CodePenChallenge: Details and Summary Roundup

The CodePen community really dug into the details for this challenge! Check out a couple of our favorites from the HTML Buddies Details & Summary week.

​Awesome realtime apps with Channels

Powerful features, 40+ SDKs supported, 150+ tutorials available and the support you need. Generous free plan. Get started today.

Unicode Patterns

yuanchuan shares the process behind those beautiful css doodle drawings in this incredibly pretty post.

Laurel / Yanny

Are you #TeamYanny or #TeamLaurel? This Pen from halvves might help you hear what the other half hears... or not. Give it a shot!

CSS Birb Generator

A colorful flock of feathered CSS friends flies by in this charming Pen from Dario Corsi. Open up the control panel to mix up the spawn rate and speed for the perfect little web aviary.

CodePen Radio #174: Klare

CodePen's newest team member, Klare Frank, joins Chris and Marie to talk about her experience going through the hiring process at CodePen and what her first week at CodePen has been like.

You should probably learn React.

It's extremely popular for a reason: React is a good fit for the fast, interactive, state-driven websites we're often asked to build as front-end developers. CodePen recommends this course by Wes Bos to upgrade your JavaScript skills.

CSS Motion Path: beyond the Big Three Properties

In this blog post, Dan Wilson takes you beyond the basics of the primary CSS motion path with demonstrations of offset-anchor, offset-path, and rays & polar coordinates.

Nice and educated WebGL frog

A "2.5D WebGL scene with day/night alternation and timed color mapping" plus a friendly frog from Sebastian.

Article transition page

A Dribbble shot by ReAlign 2, recreated in CSS and JavaScript by Muna in this lovely Pen.

Making an animated nav component

A tutorial post from Eder Díaz detailing how he recreated Mauricio Bucardo's delightful Dribbble shot with Vue, TweetMax, and FontAwesome.

Exploring WebGL

Colin van Eenige gathered his geometric experimentations with WebGL in this pleasingly color-coordinated collection of Pens.

Day 2: Pastel Motel | Pure CSS

This charming CSS illustration from Seth Hare has a strong "Accidental Wes Anderson" vibe.

Photorealistic pure CSS mobile phone

A jawdropping "pure CSS mobile phone, based on iphone X mockup. Everything is made byc CSS, no svg, no base64" from Grzegorz Witczak.