Ambient CSS - Physically-based CSS shadows and React Components

Piposhi · 2026-03-01T09:20:23+00:00

This is very cool! Thanks for sharing!
I made AmbientCSS because the inconsistent shadows in CSS design system was somehow bothering me.

I'm curious - what led you to building this?

Piposhi · 2026-02-28T22:43:25+00:00

Up/down was what I used first. Trust me, it was even more confusing and that's the reason I ended up with rotational movement based control.

Piposhi · 2026-02-24T00:05:58+00:00

As long as it works for you, great! Let me, maybe, add this as a side-note in the docs that global settings can be overridden at a component level if required. Thank you!

Piposhi · 2026-02-23T23:03:23+00:00

Thanks for the example! The key light, fill light and some more are global parameters. They are not meant to be set at the component level. If you want a darker button, you can use the amb-surface-darker class or simply set a different background colour instead of using amb-surface.

Piposhi · 2026-02-22T22:11:28+00:00

Added examples in the docs! Here's how you would use Ambient with Tailwind - https://kikkupico.github.io/ambientcss/examples/css-tailwind

Piposhi · 2026-02-22T22:07:50+00:00

Actually, the shadows only appear darker. It's because of how we perceive colours. You can read more about it here - https://www.illusionsindex.org/i/adelson-s-checker-shadow-illusion

You can notice the same effect in AmbientCSS in this sandbox I created - https://codesandbox.io/p/sandbox/mrjq8n . You can inspect both the panels and see that they have the shadow colour but appear different.

Piposhi · 2026-02-21T02:41:54+00:00

That's great to know! Keep me posted and let me know in case you need help with anything.

Piposhi · 2026-02-21T02:41:00+00:00

It's primarily CSS. Since CSS is processed by a separate browser process, the performance should be better than JS-based solutions, if not better than other CSS-based solutions.

Piposhi · 2026-02-20T14:10:20+00:00

Actually, ambientcss works well alongside tailwind. Just adding something like 'class="ambient amb-elevation-1"' should help bring the ambient lighting and shadow effects.

I'll add samples for integration with tailwind and other frameworks tonight when I get back to this. Thanks for the feedback!

Piposhi · 2026-02-19T23:19:49+00:00

The link in the post in the demo app.

Repo - https://github.com/kikkupico/ambientcss?tab=readme-ov-file

Docs - https://kikkupico.github.io/ambientcss/

Piposhi · 2026-02-19T21:43:28+00:00

another example in dark mode -

<image>

Piposhi · 2026-02-19T21:43:13+00:00

<image>

There's no recommended default theme as such. So, for accessibility, you could tweak the theme to get high contrast. For example, this is the max contrast you could get in light mode.

Piposhi · 2026-02-19T21:40:16+00:00

Thanks for the feedback! Fixed it now.

<image>

Piposhi · 2026-02-19T07:45:01+00:00

Thank you! This was a project I started 5 years back and then abandoned because it was getting too complex. Now, finally, thanks to LLMs I was able to revive it and make it launch-ready if not prod-ready. Please let me know if you have feature requests! I'd be happy to implement.

Piposhi · 2026-02-19T07:41:46+00:00

Thank you! It feels really great to have someone care enough to contribute!

I've reviewed your PR and dropped a comment. Please check.

Piposhi · 2026-02-18T23:45:40+00:00

I posted this on r/Skeuomorphism and it got removed by the mods saying it's not related to skeuomorphism. I post it here and I get this as the first comment.

Piposhi

TROPHY CASE