Hello Friends, Today in this post, we’ll learn How To Create a Neumorphism Music Player Design Using HTML & CSS. Recently I have shared a post, Vertical Card Sliding Animation Using Only HTML & CSS. but our today’s topic is Neumorphism Music Player Design Using HTML & CSS.

Today I will show you how to create a Neumorphism UI design. Basically, Neumorphism UI designs pretend to extrude from the background. It’s a raised shape made from the exact same material as the background. It has light and dark shadow combinations to visualize differences from the background. And this is the new trend in web or UI design, it looks pretty and very attractive.

So, I am sharing Neumorphism UI Design. The Neumorphism design is based on pure CSS. There I have not used any library for styling or functioning, like any JS library or CSS library. You can use this program on your website or web app because it looks good.

Neumorphism (aka neomorphic) is a relatively new design trend and a term that’s gotten a good amount of buzz lately. Its aesthetic is marked by minimal and real-looking UI that’s sort of a new take on skeuomorphism — hence the name.

It got its name in a UX Collective post from December 2019, and since then, various design and development communities have been actively discussing the trend, usually with differing opinions.

Play Video

Let’s dip our toes into the neomorphic pool, showcasing the various Neumorphism effects that can be created using our language of choice, CSS. We’ll take a look at both the arguments for and against the style and weigh how it can be used in a web interface.

Neumorphism UI elements look like they’re connected to the background as if the elements are extruded from the background or inset into the background. They’ve been described by some as “soft UI” because of the way soft shadows are used to create the effect. Another way to understand Neumorphism UI is to compare it to Material Design.

Creating a neomorphic interface with CSS is seemingly as easy as applying a regular box-shadow property on any element, but it’s more nuanced than that. The distinctiveness of a neomorphism UI comes from using multiple box-shadow and background-color values to achieve different types of effects and variations.

Now using CSS I have placed all the items in the right place, as you can see in the preview. There I have used background color and box-shadow combination to creating the Neumorphism design. There CSS box-shadow: command is mostly used for creating the UI. This program is not fully responsive, but I have decreased the sizes of some elements to open is a small screen.

For any doubts and queries, feel free to leave comments below. Remember to subscribe to our channel. Do share the tutorial if you think it’s worth it.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neumorphism Music Player</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

<link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main">
        <div class="app">
            <h5 class="text">PLAYING NOW</h5>

<button class="btn arrow">
                <i class="fas fa-arrow-left"></i>
            </button>
            <button class="btn bar">
                <i class="fas fa-bars"></i>
            </button>
            <div class="image">
                <img decoding="async" src="images/1.jpg" style="width:200px">
                <h2>Alone</h2>
                <p>Marshmello</p>
            </div>
            <div class="track"></div>

CSS

@import url("https://fonts.googleapis.com/css2?family=Karla:wght@300&display=swap");

:root{
    --primary-color:#e0e0e0;
    --gray-color:#666;
    --red-color:red;
    --app-shadow:11px 11px 39px #949494, -11px -11px 39px #ffffff;
    --button-shadow:5px 5px 10px #b6a9a9, -5px -5px 10px #ffffff;
    --image-shadow:11px 11px 22px #a4a4a4, -11px -11px 22px #ffffff;
    --track-shadow:7px 7px 14px #b8b8b8, -5px -5px 14px #ffffff;
    --font-primary:"Karla", sans-serif;
}
body {
  background:var(--primary-color); 
  font-family: var(--font-primary);
}
.main{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width:300px;
} 
.app{
  width:320px;
  height:580px;
  border-radius: 40px;
  background:var(--primary-color);
  box-shadow: var(--app-shadow);
}
.btn{
  width:40px;
  height:40px;
  margin:20px;
  outline:none;
  border:none;
  background:var(--primary-color);
  box-shadow: var(--button-shadow);
  border-radius: 50%;
  font-size: 18px;
}
.btn:hover{
  cursor:pointer;
}
.arrow{
  position:absolute;
  left:5px;
  top:20px;
}
.bar{
  position:absolute;
  right:-10px;
  top:20px;
}
.text{
  text-align: center;
  padding-top:25px;
  color:var(--gray-color);
}
.image{
  width:220px;
  height:220px;
  margin:50px; 
  border-radius: 50%;
  background:var(--primary-color);
  box-shadow: var(--image-shadow);
}
img{
  margin:10px;
  border-radius: 50%;
}
.image h2,
p{
  text-align: center;
}
.image p{
  color:var(--gray-color);
  margin:-10px;
}
.track{
  width:260px;
  height:15px;
  border-radius: 30px;
  margin:120px 30px;
  background:var(--primary-color);
  box-shadow: var(--track-shadow);
}
.track:after{
  content:'';
  position:absolute;
  background:var(--gray-color);
  border-radius: 30px;
  width:170px;
  height:15px;
}
.heart{
  position:absolute;
  margin:-70px 30px;
  color:var(--red-color);
}
.backward{
  position:absolute;
  margin:-70px 100px; 
}
.play{
  position:absolute;
  margin:-70px 170px; 
}
.forward{
  position:absolute;
  margin:-70px 240px; 
}

Neumorphism Music Player Design Using HTML & CSS.

HTML

CSS

One thought on “Neumorphism Music Player Design Using HTML & CSS.”

Leave a Reply Cancel reply

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

How To Make Form Validation Using JavaScript

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

How To Make Form Validation Using JavaScript