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.

January 15th: Sliders, Stackers, and Stardust

Grassy Text with Variable Fonts

Mandy Michael's experiment with variable fonts makes it fun to watch grass grow!

Next Generation Project Management Tool Is Here

Manage your projects & tasks with ease, plan visually on a timeline see what everyone on your team is working on at a glance.

Responsive Stacked Cubes - CSS Grid

Andy Barefoot stacks photo cubes with CSS grid, with a clever workaround for Firefox.

Masked Circle Slider

Fabio Ottaviani cuts out a "donut mask" from the sliding images in this unconventional photo slider.

Advanced Image Alignments with CSS Grid

"An experiment to mix regular floated images and full-bleed / full-bleed variant images within the same layout using a combination of old layout methods and CSS Grid." from Morten Rand-Hendriksen

Eric Thayer on CodePen

New year, new profile page for Eric Thayer! Check out his "semi-brutal" redesign of his CodePen profile page.

Tower Blocks

Place the blocks just right and build a tower. It's harder than it looks! Steve Gardner translates the iOS game "Stack" into HTML, CSS, & JavaScript.

CSS 3D Bouncy Castle

Steve Meredith built this 3D bouncy castle, so are you gonna take off your shoes or what?

Pure CSS 3D Sphere

An undulating sphere swims like a jellyfish in this mesmerizing Pen by Sergej Skrjanec.

PIXI Bezier Curve Tentacle

Shaw uses "a Bezier curve with PIXI.js rope mesh to morph a tentacle texture" and the results are a liiiiitle creepy!

CodePen Radio #156: The Most Hearted of 2017

We're back with our first episode of 2018! Chris & Marie look back on the most hearted Pens, Posts, and Collections of 2017.


Particle pro Marco Dell'Anna builds a stunning shower of stardust in this gorgeous Pen.