8 CSS & JavaScript Neumorphism Effect Snippets

The web design industry has always been great at throwing around buzzwords. One of the most recent examples is neumorphism – which is supposedly the “new skeuomorphic” for design elements.

It’s a UI trend where an element looks like it’s breaking free (or extruding) from its background. If you’re looking for a reference point, it seems reminiscent of that Star Wars scene where Han Solo is frozen in carbonite. But I digress.

As with any hot new idea, the web is teeming with examples of how this technique could be used in the real world. With that, here are some code snippets that bring neumorphism to life!

Push to Check

It’s an interesting concept: Checkboxes as buttons. Here, each option looks like a nicely rounded button. Click it, and the button looks “pressed.” This not only looks cool; it also adds a unique bit of interactivity to the form.

See the Pen Neuomorphic Checkboxes by Braydon Coyer

The Whole Form

Taking the trend a step further, this snippet imagines an entire form in this style. The text inputs look like they were carved out of the background while the buttons are bursting forth.

See the Pen Neomorphic Form by Swapnil

Neumorphism On the Menu

Icon-based navigation has been around for some time, but it’s been made somewhat new again with a dash of this technique. The hover effects make each button very intuitive, which is an absolute must with this type of low-contrast design.

See the Pen Neumorphism menu by Wouter

Collect Them All

This set of elements has just about everything you need to bring neumorphism to your own projects. There are buttons, form elements, and, of particular interest: a loading bar. It just seems like a natural extension of the look.

See the Pen A bit of neumorphism by Damir

More Accessible Morphs

If there is a downside to this trend, it’s that interactive elements can be too subtle – which hurts accessibility. This snippet aims to fix that, with hover and click states that add high-contrast borders and color changes.

See the Pen Neumorphism Accessibility Example by Michael J. Fordham

Neu Calculations

One of neumorphism’s more logical use cases would be for app screens, like this calculator. It borrows several of the basic principles but still keeps things both legible and intuitive.

See the Pen Neumorphic Calculator by Joseph R Miles

Table It

HTML tables wouldn’t seem to be the best fit for a neumorphic look, but see for yourself. Here, the table is super clean, and the row/column hover effects are brilliant—a very creative solution.

See the Pen Nuemorphic Table by Abhishek Anil Deshmukh

Get It While It’s Hot

There’s a definite appeal to neumorphism. The look is rather seamless and, when cleverly implemented, quite smooth.

Judging from the examples above, it would appear that it’s best to use the style in combination with some higher contrasting elements. This provides the right vibe but keeps the design accessible and user-friendly.