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

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.

May 1st: Gardens, Graphs, and Grids

Sass Tools for Contrasting Colors

Giana's project is "a collection of functions to make it easy to test the contrast between colors and tweak them until they pass your specified requirements. Formulas are based on the WCAG 2.0 guidelines."

A Drag-and-Drop Succulent Garden

Nat Cooper's Creative Coding Club theme for the month is "What Grows in the Garden of Your Mind?". Build your own mini-garden to the project's specs and watch your web dev powers grow!

3D Steps Counter Card

In Steve Gardner's step counting app design concept, the diamonds satisfyingly morph into a bar graph.

The Glitcher

Kittons is back with another mindbending Pen! "Every time you click you get a new effect. All glitches are made by vertex modifiers that take mouse coordinates and animation vertices as input and outputs a new set of transformed coordinates."

Pure CSS Loaders

Click the "source" link on any of Ivan Khartov's appealing single-element loaders to grab a quick copy of the CSS.

CodePen T-Shirts are Back!

By popular demand, our supersoft logo shirts are back in stock! $24.99 with free shipping all around the world.

Spring Into CSS Grid

Joni Trythall tutorial is packed with detail and a demo to help "take the potential intimidation factor out of the mix to get started, or spring into, CSS Grid."

I/O CodePen

You can say a lot with a humble toggle swtich! Paraskevas Ntinakis sure did with this charming Pen.

The Ultimate Owl Collection

We never knew just how many awesome Owls there were on CodePen until Owlypixel put together this fantastic collection!

Stars (interactive)

Constellations form and connect under your cursor as you hover around in Thibaut's interactive Pen.

How to make a Zelda Fairy (Part 1)

Ted McDonald kicks off a post mini-series detailing how he created an animated, Breath of the Wild-style Zelda fairy with CSS.

CodePen Radio #127: Alphas and Betas

On the latest episode of CodePen Radio: Chris, Rachel, and Marie talk about the stages of testing CodePen’s new Projects feature