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:

July 17th: Prototypes, Pugs, and Parallax

Castles, responsive parallax landscape

"A responsive landscape (some elements are added / removed depending on the screen size) made with Pixi.js for the epic.net website menu." by Karim Maaloul. Start on the biggest screen you have and resize for the full, beautiful experience!

CI/CD: Build Fast. Test More. Fail Less.

CircleCI 2.0 is freaking fast. Reduced build times from minutes to 12 seconds.

We Have a Winner!

Congratulations to Gabrielle Wee, the winner of our CSS Dev Conf ticket contest. Check out her animated New Orleans adventure, and even more amazing entries in our roundup post!

Flat Forest

Nicolas Raube's sunny CSS illustration of a house tucked inside a flat evergreen forest.

CSS-only image slider using SVG patterns

"This is an experiment on how SVG patterns can help us create masked-like images for a CSS-only image slider." from Damián Muti.

React & CSS Grid Image Gallery

This gallery is lit! Made with "React, ES6, and some light CSS Grid experimentation" by Tobi Weinstock.

CodePen Radio #138: Permissions

On the latest episode of CodePen Radio, Chris, Jake, and Marie talk about how CodePen handles advanced app permissions.

Game Prototype

Gtibo is back with another fun playable Pen! Use the arrow keys to drive a little pixelated car around — it's a little harder than it sounds!

Dancing Pug

Sometimes, you just need a dancing pug in your life. Now you have one, thanks to Angela Velasquez!

Ragdoll

A ragdoll has quite a strange time on a staircase in Liabru's Pen, built with matter.js.

Sheriff of CSS

The sheriff is wholesome now, and he's here to check your CSS in this hilarious animated Pen from Adam Kuhn.

Best Friends

Google's Made with Code team built a pair of Pens made to work side-by-side, just like a best friends locket!