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.

July 23rd: Stacks, Sliders, and Snow

CodePenChallenge: Checkboxes Roundup

The CodePen community checked in with some great work this week! Have a look at some of our favorites from this week's Checkboxes challenge.

Simple Project Management Tool

monday.com - A Revolutionary Visual Project Management Tool Project tracking, teamwork & client reporting like you've never seen before.

Phenomenon Instances

Colin van Eenige demonstrates the Phenomenon WebGL API with this colorful interactive Pen.

GeoStack SVG Generator

"Generates a random grid (max 3x5) of SVG rects, filled with either a circle or a line" from Melissa Em.

CodePen Meetup Brussels [June 2018]

Louis Hoebregts shares photos and a recap of the first CodePen meetup in Brussels!

Versatile CSS-Only Ripple Effect

Jessie Proffitt breaks down a pure CSS ripple effect with an in-depth tutorial within a Pen.

Web Unleashed

Web Unleashed, the conference for front-end developers, is coming October 1-2, 2018 in Toronto! There will be over 50 talks across the 2 days of Web Unleashed, covering topics including Accessibility, AI, UX/UI, Animation, Design, React, DataViz, Business Strategy, Futurism, CSS, Performance, Process, Ethics, Creative Code, JavaScript, Frameworks, Responsive Design, SVG's, Interaction Design, and Security. Save 50% with coupon code CODEPEN.

Snow Globe

A lovely "Three.js scene with different materials, lighting and STL import using STLLoader.js" from al-ro.

Pure CSS Stack

Bence Szabó's rendition of the mobile game Stack is built with regular ol' vanilla CSS, using a combination of HTML checkboxes and very clever animation.

CSS Grid Posters

An exploration of CSS grid inspired by retro poster design from Nick @wegotdeathstar.

Let there be light

"Paint with your cursor to create a galaxy" in this gorgeous Pen by Per Byhring.

Of Note: Better Text Annotations for the Web

Brandon Dorn explores a web text annotation method of "interleaved notes", designed to encourage focused reading.

Chromatic Slider

"A slider with some colourful flair" built with Popmotion by Nathaniel Watson.

Celebrating 1,000!

The @Keyframers are jumping for joy to celebrate 1000 followers on Twitter and YouTube. Check out their channel for live coding demonstrations!