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
Spark
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.

Past Editions:

November 19th: Chats, Charts, and Coffee

Transparent Marble Ball

Thibaud Goiffon creates an impressive optical illusion in this fascinating Pen.

Why do people leave your website?

4 ways to uncover the reasons why people leave your website.

#CodePenChallenge: Pandas

Check out the Pens from week two of the November 2018 Animals challenge, including jh3y's delightful "Bongo Panda"!

Blockquote Styles

"Different styles for showing quotes. Some have gentle animations" from Chris Smith.

Theming with CSS variables in RGBA

In this detailed blog post with an embedded demo, Ben Szabo shares a great use-case for CSS variables: theming apps.

What developers are doing in open source

DigitalOcean surveyed over 4,300 developers to learn what open source projects interest them the most. Go to the report to learn more.

Border Playground

Learn how color and border values can combine to help create the illusion of height and depth in this interactive Pen from Kamil Dyrek.

Heart Chat Pop

Recognize this heart? Maybe you saw it on Instagram! CodePen superstar Chris Gannon uploaded it to GIPHY and it blew up as an Instagram sticker.

Knightly Love: Tweet Tweet Jam

Ryan Kubik answered the Tweet Tweet Jam challenge with this chess-inspired game written in 533 characters.

3D Animated Bar Chart

Nick Matantsev adds a bit of delight to the bar chart with interesting patterns and mouse interactivity.

Flame

Liam Egan's response to the #Codevember "Flame" prompt is this mesmerizing blob of fire.

Coffee

Click on the coffee cups in Romina Martin's adorable Pen to change the initials on their sleeves.

Retro Record Player

Klara Miffili animated a vintage-style record player for the #Codevember prompt "music".

Thanks for notifications

This prompt isn't afraid to show its feelings when you say no to notifications! "Playing with making use of emojis in the interface and keyframes to achieve a slap motion effect" from Piotr Galor.