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

January 23rd: Smoke, Sass, and Snow

Vuenicorn

customize your own mythical beast with Una Kravets' VueJS-powered Pen

CSS Only Girl Running

This CSS animation by Adam Walker is pretty much the cutest thing ever 😍

Ye Olde Internet Scrollbars

by Charlotte Dann — "Oh how I miss these IE scrollbars. It used to take 7 lines to achieve this effect, now it takes 27! How the internet has fallen. Long live IE"

Mondrian Clock Pure CSS

The #dailycssimages challenge continues! We saw so many impressive clocks, including this Mondrian-inspired piece by Anya Melnyk

CSS Taco w/randomize

Need some taco inspiration in your life? Check our Paul Allen's taco randomizer

Ultimate Guide to Non-Rectangular Headers

Part one of a series by Ahmad Nassri "I'm going to tackle a variety of those design approaches, provide all the possible methods to achieve them (in pure CSS) along with a detailed comparison, comparing simplicity, portability, cross-browser support, and performance!"

Intro to Sass

Jorie Clark put together a wonderful guide to the basics of Sass. If you're new to Sass, you'd do well to read this and understand the features: nesting, variables, math, extends, mixins, and functions.

THREE.js Smoke Particles

Grungy looking smoke by Marco Biedermann. Looks like a nicely constructed ES6 class and only 162 lines, so plenty to learn from here.

CodePen on Instagram

If you just can't get enough CodePen, we post a lot of visually-impressive Pens over on our Instagram account.

Jue de bille

by Gthibaud - "tilt the screen with your mouse and move the sphere to the square. beware the holes in the ground"

Learning redux-form 6 with ES7

@clindsey: "Typically, developing a Redux application involves writing loads of action creators and reducers, but redux-form has abstracted all of that away and it hardly feels like writing Redux anymore."

Snow Cleared Loader

Chris Gannon has turned the fantastic snow clearing squirrel into a loading animation.