cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen

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: Tables, Ladders, and Blocks

CSS Snake & Ladders

A playable game of Snakes & Ladders, created without JavaScript by Alvaro Montoro: "It is based on the idea of using radio-buttons, and labels to activate the radios, making the pieces move only using CSS positioning".

​​​Northwestern MS in Info Design+Strategy

Learn to use research and analytics to drive communication strategies and to translate complex data into compelling visuals and narratives.

Roller coaster loader

Take a ride on a minimal CSS roller coaster from Comehope!

A second gateway to the sea

"A css3D model of the sculpture made by Sabina Lang and Daniel Baumann" from Thibaud Goiffon.

350+ Pre-Built Websites With a One-Click Installation

Be Theme has more than 350 pre-built websites. You can select a pre-built website that will work for you in minutes, and install it with a single click in less than a second.

Mystery Block Text

Dario Corsi "styled some text based on a popular plumbing game". Don't forget to click the boxes to gather your coins!

Periodic Table of Elements - HTML/CSS

A neon periodic table from Mike Golus. Click a title to highlight sections of the table. "I created this project to familiarize myself with PUG and Sass and had a ton of fun doing it."

CodePen Radio #185: All-Hands

Team CodePen got together in person for an all hands meeting to plan out a new feature, and we all got together for a podcast to talk about our experience going from remote to in-person for a week.

Splitting.js

Splitting is a JavaScript microlibrary designed to split an element in a variety of ways, such as words, characters, child nodes. The docs make clever use of CodePen templates!

CSS Illustration #1 - Bicycle

A striking red-on-black bicycling scene in CSS from Albert Feynman.

Creating an Animated SVG Neon Light Effect

Nils Binder shows you how to create a flickering neon sign, taking it "from Illustrator to Sketch to SVG" in this detailed tutorial post with embedded Pens.

feTurbulence, feColorMatrix, feDisplacementMap

Yoksel demonstrates how to use SVG elements to create a rainbow-hued flame in this dazzling Pen.

CSS Flamingo

"A flamingo brought into existence thanks to the mystical powers of CSS" by Octavector.

Fake 3D effect with depth map

Robin Delaporte "fakes" 3D on a still image. Hover over the pug to check out the (slightly eerie) motion effect.