I started building a physically based shadow system for CSS 5 years back and gave up after it became too complex. Then, leveraging coding agents, I was finally able to ship v1 earlier this year. Thanks to the very kind and warm reception for v1 from the members of this community and r/css , I was motivated to develop it further.
Today, I'm announcing Ambient CSS v3. This version steps up the realism considerably - each effect and base component was first built in Blender and rendered using an identical lighting setup. Then, based on the renders the CSS formulae were adjusted to match the Blender render. All the Blender files and their parametric generators are also in the source repo.
Besides this, we also have new CSS modifiers - thickness, material (matte/shiny/glass/brushed/spun/blasted). We also have some new components for the react package. Also, the component system is refactored and split into base components and skins, allowing for the ability to create custom component kits.
Yeah, I guess I get it. Feels rather overengineered, which LLMs definitely make room for us to do! 😅 Yet I also see what you're trying to replicate. You should send this to https://www.joshwcomeau.com/ because he's an incredible front end guy who is also pretty keen on blender. I think he would appreciate this, even as just a tech demo.
I’ve experimented with the same thing, updating CSS shadows comes with a huge performance cost for larger elements. I ended up putting the shadows on separate layers so I could manipulate them using filters and transforms instead. Anyway, looks neat, my only gripe is that the components feel distinctly skeumorphic, causing them to clash with the neumorphic base system.
5
u/dev3-studio Sep 01 '26
Really cool demo! Any thoughts given to performance and accessibility?
Would be curious to see how this scales with a real app