root `index` legacy
Neumorphic Design A full suite of neumorphic UI elements! Talking about what is the difference between neumorphism and modern style, along with a link to try it yourself. `2021-01-15` Try it! • GitHub About Neumorphism While modern design focuses on floating containers, neumorphic design tries to make containers extrude out of the background. The following picture from UX Design demonstrates that perfectly. When I first saw it, I got hooked instantly. I looked up inspiration on Google and found the following image, which I based my design on: My Design If you wish to try out my design for yourself, you can click here! All elements have both click and hover effects. When one clicks a button, it looks like it moves through the 3rd dimension, which was achieved by changing the `blur` and `offset`s of the shadows used. For any one interested, the switches are animated using a simple `click` handler and a `class.toggle()`. The CSS transitions on the switch itself are responsible for making the movement look very smooth. Final Words I started this project wanting to make a single animated button, but ended up making a full suite of interactive `UI` elements. Time will tell if I decide to turn this design into a complete `CSS` library!
© 2025 Emilien Breton `legacy/Neumorphic-Design/index.md`

Neumorphic Design

A full suite of neumorphic UI elements! Talking about what is the difference between neumorphism and modern style, along with a link to try it yourself. 2021-01-15

Try it! • GitHub

About Neumorphism

While modern design focuses on floating containers, neumorphic design tries to make containers extrude out of the background. The following picture from UX Design demonstrates that perfectly.

modern design and newmorphic design side to side

When I first saw it, I got hooked instantly. I looked up inspiration on Google and found the following image, which I based my design on:

white and purple newmorphic design

My Design

If you wish to try out my design for yourself, you can click here! All elements have both click and hover effects. When one clicks a button, it looks like it moves through the 3rd dimension, which was achieved by changing the blur and offsets of the shadows used. For any one interested, the switches are animated using a simple click handler and a class.toggle(). The CSS transitions on the switch itself are responsible for making the movement look very smooth.

Final Words

I started this project wanting to make a single animated button, but ended up making a full suite of interactive UI elements. Time will tell if I decide to turn this design into a complete CSS library!