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.

This week: Refractions, Receipts, and Retro Computing

GLSL: Refracted Rays

A new absolute mind-bender from Liam Egan: "Raymarching with refraction through a sphere's surface. Mouse Y position modifies the refraction index of the surfaces."

Image Cloud for WordPress and the Web

SmartFrame is an image cloud that seamlessly integrates into your WordPress Media Library and can also be used standalone with any website.

Off-Canvas Navigation Variants (Sidebar)

Take five different off-canvas nav options for a spin in this UI-focused Pen from fox_hover.

#CodePenChallenge: Art Heroes

For week two of the March Tributes challenge we celebrated our favorite artists. Check out the Pens from the Art Heroes prompt, including Paulina Hetman's "For Vincent".

Create Your Website Today. Any Layout. Fast and Easy.

Visual Composer Website Builder: the new plugin that lets you build your full website — from header to footer. Its user-friendly and straight-forward drag & drop editor is built with React.JS for maximum performance. Coupled with premium templates, blocks, elements, and extensions = zero coding needed.

CVS Receipt

"CVS is notorious for their receipts, so I decided to share my experience with a simple CodePen. With some quick and dirty HTML, CSS, and JavaScript - I present you with the never-ending CVS receipt" from garrettbear.

CSS Grid: Floor Plan

Olivia Ng creates a home floor plan with "lots of empty space for the dogs and cats to walk around" and CSS Grid!

ZX Spectrum

Chris Smith creates a faithful reproduction of the classic Sinclair ZX Spectrum with HTML and CSS. Did you know these things ran software from cassette tapes?

Accessibility to a11y

Alvaro Montoro demonstrates how "accessibility" becomes "a11y" in this Pen that animates pseudo-elements.

CreateJS: Infinite Irish

CreateJS celebrated St. Paddy's Day with a flurry of four leaf clovers in this charming Pen.

CodePen Radio #214: Babel 7

CodePen recently upgraded to Babel 7 for both our development team and our members. Cassidy and Marie talk about what that means for you in your CodePen editor.

Animated Details Element

Mert Cukuren demonstrates how to animate the often-overlooked <details> element with CSS.

Heart Series - Bird :)

JustYourAverageOnion continues a series of CSS animal drawings created with heart shapes with this darling pink bird.

Page Reveal Effect

Kevin Levron shares an explosive page reveal effect, built with ThreeJS and TweenMax.