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

August 6th: Squids, Splashes, and Spirals

WWPº153 "GRIIID" Generator

Antoinette Janus says this was inspired by Martin Neumann's 'WWPº153 "GRIIID"' shot on Dribbble and uses the library PleaseJS to generate colors and palettes.

​​Northwestern MS in Info Design+Strategy

Learn to use research and analytics to drive communication strategies and to translate complex data into compelling visuals and narratives.

A Case for CSS Variables

Jody LeCompte introduces the concept of CSS variables including some demo Pens that show off the idea in clear demos.

Pure CSS Moustached Nanny

An absolutely incredible animated scene from Julia Muzafarova. Make sure to check out Julia's profile for other mindbending illustration work done entirely in CSS.

Manage your projects & tasks with ease

monday.com is a powerful tool for project and team management, communications and collaboration.we keep it all in one place.

How to get better at writing CSS

Thomas Lombart goes over things like using variables in preprocessors, methodologies like BEM, file organization, and bonus stuff like live reloading CSS changes.

Vine Squids

Wonderful colors and activity in Jacob Foster's vines. Interesting to see how it was inspired by a Gerard Ferrandez, but the code was originally fork of another of Jacob's Pens that is only very loosely similar.

Live Coding MIDI Controller

Part 6 of Jake Albaugh's Tone.js series, this time using a physical MIDI controller device to modify a Tone.js PolySynth.


Flat looking buttons by Joshasusual come alive with Tilt.js when you hover over them, giving a fancy thick 3D look about them complete with lighting.

CSS-Grid Gantt Chart

CSS Grid makes it easy to span elements across flexible columns by simply specifying the start and end column numbers. Very nice little design here by Phil.

Incredibles 2 Logo Animation (CSS)

Andy Pagès was inspired by the Incredibles 2 trailer and recreated the logo animation in CSS.

🙌🏻 Catch these hands

These wacky hands by J Scott Smith wiggle wobble their way both toward and away from you, it seems. They are like those creepy creatures the put up at oil change places with the fan blowing under them.


Hard to believe that glossy puddle by Dirk Weber started life as the word "Splash!" set in SVG now that it has a bunch of SVG filters applied to it.

The Web is Made of Edge Cases

Taylor Hunt says: "People will use your site how they want, and according to their means."

Gilbert Spiral 4:3

Animating the rich alternates of Gilbert, a color font designed by Robyn Makinson and hosted on Fontself Catapult. (Make sure to look in Firefox)