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.

April 2nd: Flowers, Fancy Headers, and Flexagons

#CodePenChallenge: You've Got Mail Roundup

The CodePen community filled our inboxes with great work this week during the You've Got Mail challenge. Here are just a few of our favorite Pens from this week!

Geometric business card with CSS Grid

From design inspiration elsewhere on the internet, Liz re-creates it with modern technologies like CSS grid, flexbox, clip-path, and radial gradient backgrounds. Recreating the business card template as found here: https://novadonna.me/product/business-card-template-designs-pop-geometric/


Drag and drop (or select) and image and it becomes editable through nicely custom range sliders. Change things like hue and brightness. Astonishingly, all those image filters are a single line of CSS, using CSS variables that are passed in via JavaScript watching those range sliders.

Draggable House

Drag the roof of the house up to expand the building!

Level Up at Treehouse

Treehouse has courses to help you learn and advance your tech career. Learn things like front-end web development, iOS and Android development, and even game programming.

Video Music

Jake Albaugh's Pen creates music through repeated chord arpeggios, but which chord plays is based on the colors your webcam sees.

Kelvin Hung

One of the easiest ways to customize your CodePen profile is to drop in the URL of a Pen to use as the header background. We ran across Kelvin Hung's lovely example this week and went around poking for a few more!

Sphere Slices

Shaw recreates a GIF from the Angular Geometry blog using THREE.js and GSAP.

Moiré Effect

You might be surprised to find how little code this optical illusion too to create. As Gabriel Cyrillo says, 25 lines of CSS and voilá!

Super-powered layouts with CSS Variables + CSS Grid

Michelle Barker writes: "We’ve been using CSS Grid in production at Mud for a few months now and I absolutely love the flexibility it’s giving me when coding layout. For so long we've got along without a true layout..."

ohyeah.exe (P5JS ♥ jQuery)

James Hancock creates layers of tables of circles and animates them through p5.js

Flower Frame

Go watch a photo be enveloped in a generative SVG flower frame from Steve Gardner. Click again to see a new frame get generated with new random colors.

3D Hex Mosaic

Ivan Juarez N.'s full page tiling of hexagons over a photograph (generated with THREE.js) tilts satisfyingly as you mouse around the page. Each individusal tile also comes to life with color.