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.

December 24th: Shadows, Shelves, and Snowmen

Snowman CSS Project

A holly jolly CSS illustration with lots of painterly details from Heather Shar.

React for Beginners

It's time to learn React.js. With a focus on simplicity and readability, this course will have you building real time applications and dynamic website components in no time!

#CodePenChallenge: Fire

The CodePen community was on fire with last week's challenge! Check out the Pens from the fire prompt, including Jamie Coulter's incredible box-shadow only pixel art campfire.

CSS Grid: A Shelf!

Oliviale continues a series of CSS grid experiments with a set of responsive shelves. Resize the browser to see the shelves reconfigure themselves to fit.

Cast Shadow Visualization

Scott Kennedy demonstrates the box-shadow property with this interactive Pen. Slide the slider to experiment with different offsets and blur radii.

CodePen Radio #204: Sidebar Engineering

In part 2 of our discussion of our new sidebar, Cassidy, Rachel, and Marie are on to talk about the development side of building out the sidebar.

Native accordion with <details>

"Making the native html <details> element behave like a typical collapsible accordion with smooth animations" from Giana Blantin.

Pizza Loader

Waiting for pizza is fun with this deliciously playful animated loader from Chris Gannon.

Fun CodePen Tricks

Ben Szabo shares some tips for customizing your CodePen profile, including some clever attribute styling, in this informative blog post.

VHS Retro Style

Creme brings the scan lines and pixelated text of the VHS experience to the browser in this throwback Pen.

GSAP New Year Countdown Clock

A "simple and sleek" New Year countdown animation from Animated Creativity.

FlyIn Movie Title

Vulid brings the drama of cinema title sequences to the browser in this entertaining Pen.

`clip-path` Experiment

Raul Dronca uses clip-path to shape the borders of a gif in this clever experiment.

Go PRO on CodePen

Unlock the full power of CodePen with features like private content, asset uploading, live view, and embed themes.