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.

April 9th: Puppies, Pixel Art, and Pac-Man

#CodePenChallenge: Pac-Man Roundup

The CodePen community racked up a high score for this week's challenge! Here are just a few of our favorite Pac-Man Pens from this week.

Test the Performance of Your Website

With WAPT Pro you can test all types of websites, mobile applications, corporate ERP and CRM systems, web API services and even Internet of Things platforms.

CSS-only animated gif (Brent Rambo)

The iconic "thumbs up" gif, rendered and animated in CSS! Check the comments thread for more details from Danny Joris on how he created the animation.

Colorful logs

Louis Hoebregts tucks a very good surprise into the console in this clever browser trick for Chrome and Firefox. 13/10 would view console again!

80s "Draw in" Text with Variable Fonts

"Creating an 80s style "draw in" text effect with Decovar Variable fonts. This uses a special version of Decovar that has a couple of letters set up to "draw in". No JS, Canvas or SVG required, this demo uses HTML, CSS and Variable fonts!" from Mandy Michael.

CodePen Radio #168: Leveling Up

We all want to improve our skills and get better as a developer - but how do you know if you are actually getting better? Marie and Jake are on this episode to talk about "leveling up".

goldfishes

A serene natural scene from K-T. Check out the beautiful ripple effects!

Peter Kuhn

Adam Kuhn drew inspiration from Ioana ┼×opov's Dribbble shot to create this adorable cursor-tracking portrait of his pup, Peter.

No Div Pixel Art Scene Builder

Build a pixel art scene and export it as an image or a new Pen with Jamie Coulter's amazing tool.

Netlify

Build and deploy a CMS-enabled site with Gatsby (or many others) in just a few clicks. It's free!

The Mountains

"An interactive experiment with light and relief. Left click light, right click verticies" from Thibaut.

Painting dreams galaxy

Judith Neumann recreates a gorgeous Dribbble shot by Tiantian Xu with CSS in this dreamy Pen.