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 15th: Escapes, Snacks, and Jokes

Dither / Dissolve CSS Gradients

"Mixing noise with CSS gradients helps to remove banding, but results in an overall grainy texture. By overlaying gradients and applying masks the dithering can be controlled to affect the areas where colours blend only" from David J. Aldred.

Build Scalable Feeds, Activity Streams & Chat

Stream’s simple, powerful APIs are used by some of the largest and most popular apps for feeds and chat. Save months of development headache and focus on what makes your app unique.

CSS Outline

Ananya Neogi shares a showcase of fun things you can do with CSS outline. Think about the pixel-art possibilities of outline-style: dashed.

#CodePenChallenge: Dad Jokes

We made a lot of dad jokes, and the groans were heard 'round the world during week two of the July 2019 APIs challenge. Check out the cheeky Pens from the challenge, including Adam Kuhn's "Fwd: Hilarity". Thanks to our sponsor,

Space Oddity App

Lee Martin's celebration of the 50th anniversary of David Bowie's "Space Oddity" got its start right here on CodePen! Snap a pic of the moon and you'll hear a new mix of the tune.

CodePen Radio 229: Vulnerability

Cassidy and Marie are talking vulnerability: at work, in software, and IN work ON software. What does vulnerability in work look like? And how putting yourself out there can be a great way to help you grow.


Netlify makes web hosting eye-openingly easy. One way to do it is to just literally drag and drop a folder. Even better, connect a Git repo to a Netlify site and tell it what branch you want to watch, then any commits to that branch will automatically go live, even running your sites build as it does it.

Background Focal Point

Christophor Wilson demonstrates how to set the CSS background image's focal point with Vue.js.

Escape Room!

Find and solve all the puzzles to escape from the room in this incredibly fun Pen from the members of Kristopher Van Sant's #PassThePen community.

[CSS Grid] Swiss-Style Typography Poster 06

Henry Desroches continues an exploration of Swiss style in CSS grid with "a [mostly] CSS implementation of Jacqueline Casey's stunning poster for MIT!"

Planet Picker

The Keyframers tour the solar system with transition between number values, text animation and a circular SVG navigation! Check out the video link in the description to play back the livestream.

Three.js - Scroll for Hot Dogs

You can learn a lot from doing goofy things! hellogareth decided to give Three.js a shot, and cooked up this hot dog scroller.

Zdog - NES Shroom

Just a lil Mario Mushroom from ilithya, with drag to rotate interaction from Zdog.

CSS Open Store Animation

marianab shares a charming loading animation concept for building an online store.