10+ Neumorphism Code Snippet Examples

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!

Neumorphic Buttons

Subtle click animations highlight this small collection of buttons.

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

Fingerprint Scan

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

Neumorphic Login Form

Here’s a nicely styled login form.

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

Neumorphic Gradient Loader

An unusual gradient page loading animation.

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

Neumorphic Dominoes

Six beautifully designed all white dominoes.

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

Neumorphic Buttons

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

Neumorphic Waves

A nice pure CSS animation on click.

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

Another Button

Another button example made with pure CSS.

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

Weather App

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

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

Neuburger

A neumorphic take on the hamburger menu icon.

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

CSS Neumorphism Working Analog Clock UI Design

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

Search Bar

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!