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.
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.
Card UIs are a popular trend in their own right. And they seem to be a perfect match with neumorphism, as they provide a subtle way for content to stand out. What makes this particular example interesting is the use of the gradient background.
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.
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.
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.
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.
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.
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.
If you’d like to see even more neumorphic UI snippets, check out our CodePen collection!
- 8 Creative CSS & JS Snippets for Creating Pixelated Backgrounds
- 10 Dramatic Examples of Splash Screens in Web Design
- 8 Excellent Examples of Using Stacked Text Blocks in Web Design
- 10 Amazing CSS & HTML Retro Type Effects
- 8 Fantastic Onboarding Carousel HTML & CSS Snippets
- 12 Stunning Examples of Text Distortion Effects in Web Design
- Keeping Time: A Collection of Clock and Timer Code Snippets