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.

October 22nd: Mines, Mazes, and Morphing

The Mine: No JS, CSS only adventure game

Jamie Coulter's incredible, playable Pen pushes checkboxes well beyond the limit. "The concept initially started off as a simple 'Walk down a corridor and avoid traps' game, but it just kinda escalated from there. I decided i wanted to go up and down, solve puzzles etc."

Save time. Wow clients. Any website.

100s of modular features for any website or web app. Build fast, beautiful sites without reinventing the wheel.

#CodePenChallenge: Skeletons

No bones about it, the CodePen community knows what to do with a challenge! Check out the Pens from the Halloween challenge's skeleton prompt, including Mariana's creepy selfie camera!

#02animation: seals

Claudia translates a Dribbble shot by Nanna Paskesen into CSS. "Arctic seals: curious and shy. If you get too close with your mouse they will try to escape".

Netlify

Netlify makes web hosting eye-openingly easy. One way to do it is to just literally drag and drop a folder. Even better, connect a Git repo to a Netlify site and tell it what branch you want to watch, then any commits to that branch will automatically go live, even running your sites build as it does it.

Gradient Shapes

A gallery of code snippets for shapes generated with CSS background gradients, from yuanchuan.

CodePen Radio #195: Cypress

Chris, Alex, and Marie are here to talk about how we've started testing with Cypress. We talk about the kind of testing we do at CodePen, where the need for it came from, and what our experience has been like using Cypress so far.

Double Ninth Festival

Yiting Liu commemorates the festival with a beautiful SVG illustration.

Bars

"CSS progress bars made with svg patterns" from lucagez. Hover over the bars to watch them fill with their patterns.

100 Days CSS Challenge

Matthias Martin posts a daily design prompt and a starter Pen template, and you can submit your Pen to show off right on the site!

Author

Katherine Kato shares a " minimal 'About' page layout of a fictional author".

Maze Pathfind

"Recursive maze generation and hand-on-the-wall pathfind" from Rafael Castro Couto.

Image Tile Rotator

Jake Albaugh takes an image, breaks it up into chunky tiles, and rotates the tiles at random for a bizarrely pixelated effect.

Border Radius Morphing

"Just an experiment with multi step border-radius values and background-positioning" from Mattia Astorino.