cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen

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.

July 16th: Drums, Drawings, and Duotone

Duotone filtering w/ CSS variables

"Was playing with mix-blend-mode to create different duotone filters. Then I thought it might be cool to have a handy selector wheel to try out different filters" a great idea with a fun interface from Jhey.

​Reinvest Your Time with HelloSign API

G2 Crowd says HelloSign's API is 2x faster to implement than any other eSign provider. What are you going to do with all the time you save?

Headings with Side Lines

"Fun with heading elements and pseudo-element side lines in Sass" from Ryan Mulligan.

Treasure Chest

"Based on Legend of Zelda, the treasure chest was built in CSS and HTML, using JS to handle CSS Variables" from Antoinette Janus.

Bitwise Operation

Sammy Helali shows you how bitwise operators work in this interactive demonstration.

Get more from your Apple devices at work

Setup, manage and protect your Apple devices in minutes so you can spend your valuable time doing other work.

Slice list items

A satisfying way to slice through a todo list! Aaron Iker recreates this fun micro-interaction from Eddy Gann's Dribbble shot with JS and CSS.

Physics-Based Background Scroll Effects

Will Boyd shows you "how to create nifty physics-based background scroll effects" with Matter.js in this tutorial article.

CodePenChallenge - Forms Roundup - CodePen Blog

The CodePen community found the fun in functional this week and informed us of lots of new possibilities. Check out some of our favorites from the forms challenge prompt!

drawing spirograph

A mesmerizing spirograph draws itself with impressively realistic pencil lines in this lovely Pen by Mladen Stanojevic.

Website showcase on switching devices

A clever device mockup concept from Creme: click to switch from a mobile layout demo to the desktop version.

Isometric eCommerce CSSGrid

A slick, responsive shop layout with nice hover states from Andy Barefoot.

Drum Sequencer

Build yourself a beat with Stefan C's "WhoDrum 2700". Created with howler.js.

CodePen Radio #182: Browserless

We improved the quality of Pen screenshots on CodePen using a "headless" browser, and we've got Joel Griffith from Browserless on the show to help us talk about how it all works.