𝑥morphic is a skeuo/glass/neu-morphic CSS generator built with Vite + React + TS. It is inspired by (but not forked from) neumorphism.io and css.glass, and aims to improve upon those projects in a few crucial ways.
Portability: Once your CSS is generated, you shouldn't have to come back to the website if you want tweak its parameters. 𝑥morphic generates CSS with accessible variables that even non-developers can adjust locally.
Realism: 𝑥morphic leans on real-world physical properties to create its styles. This not only looks good, but also ensures that (almost) every combination of parameters results in a realistic-looking element.
Using the platform: 𝑥morphic takes advantage of CSS variables and other modern CSS features, without requiring third-party libraries or Javascript.
Too much code! 𝑥morphic generates a lot of code! And while it's easy to configure, it's often hard to understand, or to modify its internal logic.
Bad blending 😔 The element's shadow would ideally use a
soft-lightormultiplyblend mode onto the background, but this was not possible for technical reasons.Old news! Almost all the code in 𝑥morphic will be redundant once relative colors gains widespead browser support. C'est la vie.