cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - 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.

September 17th: Potatoes, Honey, and Beer

#CodePenChallenge: HTTP Status 500

Leave it to the CodePen community to find the fun in a 500 error! Check out the Pens from the second week of the September challenge, including jh3y's "CSS Potato 500".

Embed HelloSign API into your app in minutes

You won't find an eSign product with an easier path to implementation. It's 2x faster to implement than other eSign solutions. Try it today!

Product

"A minimal single product page built with Flexbox (@supports for CSS Grid) and vanilla JavaScript" from Katherine Kato.

The Faces of Electric Outlets

"The electric outlets on your walls have feelings, too." Check out all the expressions in this animated Pen from Jon Kantner.

Jetpack

Jetpack brings a whole range of features to your self-hosted WordPress site. From realtime backups that keep your site safe (and make it easy to move!) to improved search results. From related posts to social media integration - it's a no-brainer plugin for people serious about making their sites better.

3D Emoji Town (Pure CSS)

George W. Park animates a mini-town with emoji, CSS, and just a smidge of JS. Slide the slider to rotate the scene and check out all the action in Emoji Town.

Red Onion's Daily Prophet using CSS Flexbox

Ana Liza Pandac shares a flexbox take on the wizarding world's paper of record and shares the steps she took to work that magic in this post on dev.to.

Variable Font Experiments

Mark Fromberg shares a selection of experiments that show off the fun and flexibility of variable fonts.

A CSS Telephone Box

A beautifully detailed phone box from Ben Evans with a clever balance of shadows and light.

Beer Slider: Responsive & Accessible Before-After Slider

PeHaa Hetman demonstrates a "keyboard accessible, responsive and open-source" library for before & after photo sliders. Try out all the variations in the embedded Pens!

Card explode | Disintegrate.js

Zach Saucier brings new meaning to cutting up your credit cards to demonstrate his Disintegrate.js library.

CSS Honey Jar

Time for something sweet, like this honey jar "created with layered backgrounds and clip-path. I used a background gradient for the lid" from Mark Pesantes.

CodePen Radio #190: Getting a Gig

Cassidy Williams knows a thing or two about getting hired, and she's on to share tips for finding work as a front-end developer.

Moonwalk

Betul pays animated tribute to an iconic move in this Pen. This could be a fun loader!