Code & Algorithms » Demo & Live Tool Playground
Web Demo: CSS Dynamic Point Light Source & Parallax Shadows

Let There Be More Light: Web Demo: CSS Dynamic Point Light Source & Parallax Shadows

Click here to view this in a separate tab.

This demonstrates a high-performance method of rendering dynamic CSS drop shadows from a simulated point light source.

The note and sun light source elements have been made interactively user-draggable by the inclusion of an external draggability package.

Until I have this documented, you can see the code on Codepen at https://codepen.io/kupietz/pen/LEpzJgL.

Update, Feb 2026:

This is not my work but it deserves a mention here. I've been completely outdone. Check this demo out. This guy designed an entire css system around physical lighting: https://ambientcss.vercel.app/ Github: https://github.com/kikkupico/ambientcss

Code & Algorithms » Web
Scripts to Analyze CSS from Firefox’s Javascript console.

For Web Devs and Other Tool-Using Animals: Scripts to Analyze CSS from Firefox’s Javascript console.

When, in the course of human events, it becomes necessary to understand why your wordpress site's freaking menus display fine when you're logged in as administrator but are completely broken when you're logged out, it may be useful to be able to easily compile all the CSS for the affected page elements for both the working and nonworking versions, and compare them to see what might be different.

Let me back up. I had a problem the other day where my Wordpress site's caching plugin, which performs various optimizations on my site's code for non-logged-in users, was adding some sort of broken CSS. When I was logged in, everything worked fine, but when not logged in, something changed somewhere in the CSS that caused some of my menus not to display. I had a rough idea of where the changed code must be, but no more than that, and…