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

June 25th: Scrollers, Shy Blobs, and shape-outside

Truchet

An eye-popping collection of experiments in GLSL Truchet tiling and patterns from Liam Egan.

​Customize payment solutions with our enhanced platform

Use our streamlined API and better sample code to provide your merchants with a secure, scalable and customized payment solution.

Shy blob - Face detection

Cassie Evans' lil blob dance like no one is watching — but *only* if no one is watching! If you peek (through your webcam) this shy blob will stop boppin' and start blushin'.

iOS 12 Dark Mode Notifications

"I got inspired by the macOS Dark Mode announcement at WWDC 2018 and decided to visualize how Dark Mode notifications might look on iOS!" from Gabrielle Wee.

shape-outside experiment

Kristopher van Sant says "Hello World" in this heartwarming experiment with the shape-outside property.

Project management is better when it's visual

monday.com - A Revolutionary Visual Project Management Tool - Project tracking, teamwork & client reporting like you've never seen before

Cute Tab Switching

We know somebunny's gonna love these adorable rabbit tabs from iico.

CodePenChallenge: Figure & Figcaption Roundup

The CodePen community did amazing work with last week's challenge prompt! Here are just a few of the fantastic Pens from the figure and figcaption challenge.

Polygon Alphabet

Jamie Brook predefines "visibility and rotation of triangles to create letters" to create a unique alphabet (with a bit of satisfying animation, too!)

Simple Scroller for Animated Backgrounds on Canvas

Dan Zen demonstrates how to use Zim.js to create a spacey scene in this animated Pen.

Game Boy Running Zelda

Karl Patrik Johansson faithfully recreates both a vintage GameBoy and the intro to Link's Awakening in this rather magical Pen.

Cloud Download Animation

"Based on the App Store cloud download icon but animated. The idea is to show spinning water droplets on preload then turn the down arrow into a progress bar after falling. When the download is completed, a checkmark pops out of the cloud" from Jon Kantner.

Pure CSS Article Design - Deforestation

Conner ads a bit of lush greenery to an article card in this lovely Pen. Hover the article number for a little bit of animated delight.

Real Time Moon

"This moon orbits the earth very slowly - kind of like the actual moon. Only the real moon orbits every 24 hours. We don't have that kind of time" from Burke Holland.