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.
The
Spark
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.

Past Editions:

This week: Regex, Reindeer, and Randomness

Shady Signup

Nice email address. Would be a shame if someone chucked it in the trash, like Adam Kuhn's very opinionated form.

Kubernetes in Minutes on DigitalOcean

Designed for developers, DigitalOcean Kubernetes makes it easy to provision and deploy clusters in minutes

#CodePenChallenge: Water

The CodePen community made a splash with last week's challenge! Check out our collection of Pens from the Water challenge, including Ekaterina Vasilyeva's "H2O".

Random Pure CSS Geminid Meteor Shower

Did you happen to get a glimpse of the Gemenids? If you didn't, don't worry, jh3y's got you!

How to build a Viz App: Charting React vs Vue NPM Battle

A step by step tutorial guide visualizing the popular React vs Vue NPM battle. See who is winning, and build this cool app yourself!

100 Days CSS Challenge N° 076

Alvaro Montoro combined the pattern attribute, the :valid pseudo-class, and the adjacent sibling combinator with a bit of regex to create a form that reveals a secret key when the right password is entered.

Fitting a Div to the Screen Size and an Aspect Ratio

EightArmsHQ shares a tip for styling a div with a "fixed aspect ratio, to suit the art style and game mechanics".

CodePen Radio #203: Sidebar Design

Klare, Cassidy, and Marie are on the show to talk about the newly redesigned Sidebar and what the process was like for all involved at CodePen on the redesign.

Fun List App in Vue

A "to be read" list app built with Vue by Christina Deemer. Enter a book's author and title and the app organizes it in the list.

Rudolph

"A CSS drawing and animation of the 1964 felt Rudolph" by John Kantner.

Counter-Intuitive Happiness

A poster creator in the style of the Fandangoe Kid from James Hancock. Type in your statement and decorate it to create your own poster design.

Link Styling Exploration Without Classes

A helpful demonstration of how to style links based on their attributes from Sil van Diepen.

DebuCSSer

A "CSS debugging tool with an unpronounceable name" by Luca Gesmundo. Press CTRL and move the mouse around the page to see the class, ID, and size of each hovered element.

Card Music Player

"An excuse to try CSS Grid, CSS Variables and throw in a marquee tag" by Mike Quinn, inspired by Teacup42's Dribbble shot. Check out both the dark and light themes!