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.

January 1st: The Future is Fancy

Pointer Controlled Elastic Points

Jack Rugile plays with polygons and physics and things get jiggly.

​Welcome to the future

Anymod is a fast, SEO-friendly CMS you can add to any website, on any platform.

Naughty Or Nice Toggle

As an excuse to explain transitions, Bryan Smith made this delightful little holiday themed switch.

Resolutions for 2018

Henry Desroches shares his month-by-month plan for growth as a developer in 2018 in this stylish Pen.

Charlotte's Web

Laura Culham weaves a fitting tribute to "the original web developer" in this terrific Pen.

The Future Belongs to CSS

"Just a fun, pure CSS exploration of some newer or less common CSS features, including CSS Grid, Flexbox, position: sticky, and Sass (for the random colors and a couple other niceties)" from Josh Collinsworth.

React Slot Machine

"A slot machine is a good use-case for React due to all the state we need to track. I use a CSS sprite and randomly move its background image" from Andy Hoffman.

CSS Geometric Fox

Cassidy Williams translates a charming Dribbble shot by Ty Wilkins into a CSS image.

Fancy Numbers

Who says ordered lists have to be boring? Tiffachoo gives list items a whole lot of style in this Pen.

Double Exposure

Mikael Ainalem merges flora and fauna in this Pen demonstrating how to blend two images inside a clipped path.

CSS Grid Meets Bauhaus

Andre Rusakow builds in Bauhaus style with CSS grid for a striking navigation concept.

Gooey Text Background with SVG Filters

"Example of using a gooey SVG filter to create smooth edges around inline text with a background" from Ines Montani.