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.

April 10th: Twisted Typography, Pixel Stretching, and CSS-Doodle Candy

154. UvUv {bump,alpha,diffuse+}

ycw continues a series of surreal Three.js scenes with this grainy, distorted photo. Click/tap into the scene to rotate the image and watch it animate from every angle.

Real-time Colors

Juxtopposed shares this handy tool to preview what your favorite color palette could look like on a real website. Pop in your color choices, or hit the "Randomize" button/spacebar to preview random palettes.

Pixel Stretch Effect

Andy Fitzsimon uses CSS transforms & `image-rendering` to create a super-stretched photo distortion that clears away with a slick animation on hover.

Want to go static? We'll host it for you.

Deploy static sites, SPAs, and PHP Apps on GitPush with Deploy Now.

Candy - CSS Doodle

aragakey serves up a lovely confection built with the css-doodle web component. Check out the subtle shine animation moving through each disc.

#CodePenChallenge: Earth Textures

We kicked off April's "Textures" challenge with an earthy theme. Take a spin through our collection from week one, including Pens by Jesse Shawl, Henrique F. Schwingel, Gemma Croad, and Nicole Sentis.

Draw with Flowers!

Big beautiful flowers bloom along your path in this interactive GLSL Shader & Three.js Pen from Ksenia Kondrashova, built with "One full-screen plane, two render targets, and a bit of shader magic".

3 Cubes in 3D (CSS only)

A trio of transparent cubes stack, bounce, and tumble on a rotating pedestal in this CSS animation from Amit Sheen.

1 div pure CSS blinds animation in 13 declarations

Ana Tudor creates the illusion of horizontal blinds in this single-div hover animation. "1 div, pure CSS and very little of it - only 13 declarations and 495 bytes in total, close to 15% of which are represented by the cat image URL".

Colorful Theme Switch

Jon Kantner shares "A theme toggle switch that utilizes :has() to turn everything dark rather than the tiniest bit of JavaScript." Best viewed in Chrome (for now!)

Escher Rive Interactive Animation

Click the letters to watch them twist in Escher-esque style in this mind-bending Pen from Jeffrey Karl, built with Rive.

Blurry background video with CSS

"This is a cool thing you can use as a "be right back" screen on your livestreams. It just autoplays a 3 hour timelapse video hosted on YouTube and utilises css backdrop-filter to blur out the video." From Jasper.