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:

This week: Cookies, Cats, and Crossings

Knitwear Landing Page (CSS Grid, Flexbox, AOS Scrolling Animations)

"Practicing CSS Grid implementation with a simple responsive landing page for a small knitwear brand. Uses Grid & Flexbox, with AOS scrolling animations" from Lauren Chilcote.

WordPress.com

WordPress powers 31% of the internet. Use WordPress.com to start, update, and view your site seamlessly from any device. There is a generous free plan, but with any of three affordable paid plans you get a custom domain name and access to advanced design tool.

#CodePenChallenge: Circles 🔵

We bounced into February's Shapes challenge with circles! Check out the Pens from week one of the challenge, including Paulina Hetman's beautiful "Welcome to Paris - Place des Vosges".

Random Quotes from Romantic Films

Valentine's Day is coming! Kevin Newcombe's "romantic" Pen "uses the WikiQuotes API to pull random quotes from romantic films and add them to candy hearts" with some interesting results.

React for Beginners

It's time to learn React.js. With a focus on simplicity and readability, this course will have you building real time applications and dynamic website components in no time!

SVG Filters are 💕

Yoksel creates a psychedelic expanding heart with SVG filters in this hypnotic Pen.

CodePen Radio #209: Chris Gannon

Chris and Marie talk to CodePen community treasure Chris Gannon about how he uses CodePen with clients, how practicing on CodePen makes him better at his craft, and the various tools he's used to do his work over the years.

CSS Position Sticky - How It Really Works!

Elad Shechter gets into all the details and sticking points of `position: sticky;` in this tutorial post with lots of helpful CodePen embeds.

Pure CSS Bun Frog Toggle

jh3y animates @ittybittybun's Twitter explanation of the subtle difference between a bunny and a frog illustration in this interactive Pen.

Couple Kitties

JustYourAverageOnion translates a Dribbble shot by Steph Werning into CSS in this heartwarming Pen.

Splitting.js: Rough Type

Team CodePen's own Stephen Shaw demonstrates how to get that old-timey typewriter look to your text with Splitting.js.

Cookie Consent Toggle

Darin Senneff takes a whimsical approach to cookie consent with this tasty toggle. Watch what happens when you slide the toggle off!

Desert Crossing

Alex Goff's animated Pen is "inspired by a trip to Denver and watching the airport train go back and forth across the high desert".

Vintage Analog TV

"A (somewhat) functional black-and-white TV from the early 20th century" by Jon Kantner.