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:

October 9th: Connections, Concepts, and Beautiful Mistakes

Pure CSS Connect Four

An impressive display of the power of the :indeterminate pseudo-class and CSS counters, by Bence Szabo

Modular, embeddable content management

Add CMS functionality to any website, on any platform. Make content & code edits quickly, and empower non-technical users to edit content themselves

Portrait

The #inktober crossovers are starting to appear on CodePen! Lisi shares her SVG self-portrait.

CSS Grid Responsive Perspective Layout

"A CSS Grid layout using CSS perspective to give a 3D effect," populated with Pitchfork's top 40 albums of the 90s. By Andy Barefoot.

Recreating “Yoshi’s Island”

Ben Matthews writes about how he recreated the title scene from Yoshi's Island with JavaScript in this detailed blog post.

UI Motion - Shopping Cart Concept

Nerdmanship demonstrates a bit of shopping delight in this UI concept for ecommerce.

Lotus CSS Animation

Gabrielle Wee's experiment with 3D transforms yields a serene scene.

CodePen Radio #145: Preprocessors and Lambda

Tim H., Alex, and Marie are on to talk about preprocessors on CodePen — how they work, how we maintain them, what we do when a preprocessor becomes obsolete, and some thoughts on the future of preprocessors on CodePen.

Baby | HTML + CSS

Decisions, decisions! Cameron Fitzwilliam translates a Dribbble shot by Misha Petrick into HTML & CSS.

Beautiful Mistakes: Coming Up with Unconventional Layouts with CSS Grid

"The awesome thing about these accidents is that it results from a bug in my code but the bug leads to beautiful ideas." Ren Aysha writes about discovering an interesting layout while making "mistakes" with CSS Grid.

Planet Pen

Vangel Tzo drew inspiration from a Dribbble shot by Julien Clauzier to create this subtly animated celestial Pen.

Day One (Pure CSS)

"Just a simple card flip, toggled by a :checked input field!" by Henry Desroches.