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 9th: Surrealism, Subtlety, and Silk

Visualizing The Earth's Orbit & Seasons

An exploration of the seasons that "works with CSS custom properties and some border-radius magic", from Mustafa Enes.

Netlify

You can deploy a website on Netlify with a single click. Try out a Gatsby, Hugo, or 11ty site by clicking a single "Deploy to Netlify" button and go from there!

The Beauty of Mathematics - Linear Transformations

This lovely visual exploration of linear transformations in mathematics is the second in a series from Nick Shillingford.

Layout is overrated

"Bootstrap: overrated. CSS Grid: overrated. Just throwing everything at the page: Hottest trend of 2018" - a little layout fun from Andy Barefoot.

The div that look different in every browser

Martijn Cuppens' experiment with outline and a negative outline-offset yields some whimsical cross-browser results. Which one is your favorite?

Jetpack

The ideal way to experience WordPress. Jetpack is a WordPress plugin that provides incredibly useful features like backups, security scanning, image performance, social media integration, Markdown support, and more.

CodePenChallenge: Signatures Roundup

The CodePen community showed off its signature style in the first July challenge! Check out a few of our favorites from the challenge prompt "sign on the dotted line".

Golconda (Magritte)

Dion Dermott brings a bit of midcentury surrealism to the frontend with a parallax animation of Magritte's "Golconda".

CodePen Radio #181

On the podcast, Marie and Chris talk about how we decide what new features get added to CodePen, and get into the process of taking them from a lightbulb moment to building them out on the app.

Low poly animals

From Mikael Ainalem: "using raf (requestAnimationFrame) to animate between different low poly animals".

align icons micro-interaction

A bit of subtle delight: a CSS menu animation Inspired by Oxygenna's Dribbble shot, from Mert Nerukuc.

There's no place like home

"A CSS-only house based off of the Pokemon Gameboy art featuring some JS and CSS variables to change its colours" from Tiffany Choong.

css (cascading silk screen)

Daniel Warren recreates one of his own paintings in CSS in this beautiful Pen. Make sure to check out the code comments for a link to the original work!

Profile Grid Demo

Jules Forest shares a demo of the solid CSS grid used to display profiles on Women Who Design.