Neumorphism is a recent trend that is a descendant of skeuomorphism and is being used in UX and UI design on websites everywhere. To take a quick look at this newer trend we’ve put together a collection of some cool examples for you to browse and potentially use in your upcoming projects. Let’s dive in!

Subtle click animations highlight this small collection of buttons.

See the Pen Neumorphic Buttons by Sikriti Dakua (@dev_loop) on CodePen.dark

A cool animation of a fingerprint on hover make this one interesting.

See the Pen Fingerprint scan – neumorphism by Cassie Evans (@cassie-codes) on CodePen.dark

Here’s a nicely styled login form.

See the Pen Neumorphic Login Form by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.dark

An unusual gradient page loading animation.

See the Pen Neumorphic Gradient Loader by samuel garcia (@sam_garcia2) on CodePen.dark

Six beautifully designed all white dominoes.

See the Pen Neumorphic Dominoes by P (@petegarvin1) on CodePen.dark

Hover over each of the 16 buttons in this collection to see a different animation for each.

See the Pen Satisfying Button (Neumorphic) by Yuhomyan (@yuhomyan) on CodePen.dark

A nice pure CSS animation on click.

See the Pen neumorphism waves by Kilian So (@kilianso) on CodePen.dark

Another button example made with pure CSS.

See the Pen Neumorphism Buttons by zeynep (@zeynepozdem) on CodePen.dark

Here’s a nice design that was coded in pure CSS.

See the Pen Neumorphism Weather App by Travis Williamson (@travisw) on CodePen.dark

A neumorphic take on the hamburger menu icon.

See the Pen Neuburger by Jacob (@HuntingHawk) on CodePen.dark

A nicely styled analog clock.

See the Pen Javascript Clock | CSS Neumorphism Working Analog Clock UI Design by samuel garcia (@sam_garcia2) on CodePen.dark

At first glance this search bar is relatively simple, but type in a word and hit “Enter” to see some slick animation.

See the Pen Neumorphism Search Bar by Tran Dinh Trung (@tdtrung17693) on CodePen.dark

How Will You Use Neumorphism In Your Projects?

Whether for a mobile app or a website, this trend could be something you could use in your upcoming projects – or not. We hope our small collection has provided some inspiration and insight as you make that determination. Be sure to check out our other collections while you’re at it!

This post may contain affiliate links. See our disclosure about affiliate links here.

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *