Skip to content

A skeuo/glass/neu-morphic CSS generator built with Vite + React + TS

Notifications You must be signed in to change notification settings

PeterTYLiu/xmorphic

Repository files navigation

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

Design goals

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

Shortcomings

  • 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-light or multiply blend 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.

About

A skeuo/glass/neu-morphic CSS generator built with Vite + React + TS

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published