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.

June 4th: Cells, Cycles, and Colors

#CodePenChallenge: dt and dd Roundup

If there's one thing that defines the CodePen community, it's willingness to step up to a challenge! Check out some of our favorite Pens from the last week of the May HTML Buddies challenge: dt and dd.

​Delightful realtime apps with Channels

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

Getting Started With CSS Layout

Learn the basics of modern CSS layouts in this tutorial post full of helpful embeds from Rachel Andrew for Smashing Magazine.

Mirror's Edge Game Menu

Berrak Nil kicks off a personal challenge to recreate video game menus for the web with the title screen for Mirror's Edge.

Sass Color Scheme Generator

Stumped for a color palette? Generate nine random palettes with Giana's SCSS-based Pen.

Understand your users behaviour

See how your users and visitors are really using your website.

Daily UI #006 User Profile

Kelly Chen shares a fun user profile concept in this Pen designed for the Daily UI challenge.

Pure CSS Tic Tac Toe w/ SVG

Jhey uses a clever checkbox hack to create a playable game of tic-tac-toe with CSS!

Aspect Ratio Cells with CSS Grid Layout

Michelle Barker shares how she built a grid layout with an aspect ratio defined on each grid cell itself so they always maintain that ratio, even if they're empty.

Playing with SVG displacement filter

Get a feel for how SVG displacement can change and distort an image in this interactive Pen from Sota Hatakeyama.

CodePen Radio #176: Technical Debt

Marie talks with Alex about technical debt and what that meant for CodePen in the past, and how CodePen is working to minimize our technical debt in the future.

Apple Keyboard

Jon Kantner creates another stunning work of CSS art with this startlingly realistic Apple keyboard. Hit the caps lock key for a little surprise!

Pixie's Moon Cycle

Cathbailh experimented with css-doodle to create this gorgeous Pen that's just bursting with flower power.

Kitties! (hover images)

Ana Tudor demonstrates the possibilities of clip-path in this big cat showcase. Check out the YouTube link in the description to see how it was done, step-by-step!