cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen

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.

July 2nd: Synths, Solids, and Sun

Only CSS: Mt. Fuji

A beautiful CSS illustration of Mt. Fuji with a popup book feel from Yusuke Nakaya.

Delightful Realtime Apps with Channels

Powerful features, 40+ SDKs supported, 150+ tutorials available and the support you need. Generous free plan. Get started today.

Infinitely Drawing Icons

"Using SVG line animation to infinitely draw the outline of connected icons. This outline together with a couple of additional lines create a loader which cycles icons" from Mikael Ainalem.

CSS Shapes, Columns and Clipping

An experimentation with CSS columns, CSS shapes, clip-path and background-clip, bedecked with roses, from Mandy Michael.

Easily Manage Your Apple Devices Free

Jamf Now is a device management solution for the iPad, iPhone and Mac devices at work. Make IT tasks simple and affordable, so you can support your users!

1 Element CSS Spinners

Need a spinner? Grab one from this 8 pack of minimal CSS spinners from Paolo Duzioni.

CodePenChallenge: Menus Roundup

The CodePen community served up some wonderful Pens for the final week of the June challenge! Have a look at what was on the menu, and get ready for July's challenge.

ARIA Busy Loading Animation

Adrian Roselli demonstrates how to use the aria-busy attribute to make a loading animation accessible: "changing it from true to false is not only a CSS hook, but imparts accessibility benefits for users".

CSS Doodles

A series of four sweet treats, all drawn in CSS by agathaco!

Live Coding Synth Tester A

Team CodePen's very own Jake Albaugh demonstrates how to use Tone.js on CodePen in an in-depth, two-part tutorial video.

Solids

A new hypnotic, geometric Pen from Dave DeSandro's Round 3D collection.

Alfa Romeo 1969

Kristina Dinellari translates a Dribbble shot by Varun Kumar into CSS in this groovy Pen!

Sun Rise Moon Rise

"Sun and moon rising and setting. The animation uses the date/time to control the height above the horizon of the moon or sun depending on the time of day. You can also press the toggle switch to control the animation using the slider" from Adam Walker.

HummingBird Loader

Christina Gorton experimented with GSAP to create a colorful and cheerful hummingbird loader.