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.

March 5th: Chameleons, Challenges, and Celeste

Join the CodePenChallenge!

We know the CodePen community loves a good challenge! Every Monday this month, we’ll post a new challenge prompt to spark your imagination, and share some resources to help you make your ideas come to life. Week one's prompt is: Stargate.

Learn essential CSS skills with Treehouse

Add to your creative tool box. Start your path to becoming a front-end web developer, or brush up on your skills with our CSS course.

Oscar Pool 2018

Catherine shares how she created an Oscar pool with a CodePen frontend and a Google Form backend in this tutorial post.

Animated Status Indicator

Show your status with a wiggly worm in this Pen by Bard N Hovde: "The original idea was an animated 'presence indicator' i.e 'Carl is typing...'".

The Chameleon from Null Island

"This endangered chameleon species is usually spotted in the dense forests of Null Island. With special abilities like camouflaging to background colors and reacting to DOM hovers, it has an appetite for Defaultae Pointericus insects." A color-changing, cursor-eating creature from the mind of Airnan.

Stylized Buttons

A collection of elegant button hover states from Paraskevas Ntinakis.

Bouncing Tumbleweed

Because even when you've got nothing, you still want to show something! A little something for a 404 page or empty search results from Aidan Breen.

Celeste snowglobe round 3D

"Special sauce includes bokeh shapes for the snowflakes and light rods, which grow & fade out as the move further from the scene center." One of a series of fantastic round 3D Pens by Dave DeSandro.

Donut Progress Bar

Donuts. Is there anything they can't do? Measure your progress in pink sugary goodness in this Springfield-style Pen from ErreC.

Team section - CSS Grid + flexbox

Meet the team of pro doggos in this Pen that combines grid and flexbox for a responsive team page.

Love and Peace

Click the canvas to generate a new design built from the words "Love" and "Peace" by Gerard Ferrandez.

The Password Genie - Vue.js

Nour Soud built a password generator with Vue.js! Slide the length, digits, and symbols selectors to customize the results.