𝑥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.