Design

Top 13 Neumorphic Design with code

Hello everyone, in this blog post we will be learning how to create neumorphic design in Html, CSS, and Javascript. We created glassmorhphism designs as well and you can check them. In this design, we have created multiple web elements and all of them are different from each other. But this time we applied a neumorphic effect on these elements. Let’s check how we developed this beautiful design in Html, CSS, and Javascript.

Toggle Button:

The toggle button is used to switch from one point to another. It helps to change the functionality like theme switching between light and dark and much more. We have taken a round circle as a button for switching the button and after switching its changing its color. You can connect it to any functionality but now it’s just a design for you.

Check Button:

Then we created a button for checking the options. While checking this button we can select multiple options. Their basic function is to work as a checkbox. In this button, we have used an icon of tick and then provided color to that icon. After that create the design of the button and set the icon of the button. It has a click design as well. After clicking on this button it is changing the design and shows that this button is clicked.

Radio Button:

A radio button is used when we want to select one option from two or more given options. These options may be gender (male or female) etc. We use these buttons for such kinds of operations. It is created using a radio button in Html but later on, we applied a neumorphic design effect to this button. It has a single dot option which is used as an icon in this button.

Simple Button:

This button is used to add functionality or any movement from one section or page to another section or page on the website or internet. Buttons can be used for various type of activities and it is simply created using <button> tag. But design changes from place to place.

Analog Clock Neumorphic Design:

This is an analog clock developed using Html, CSS, and Javascript. First, create a round circle. Then create the center of the circle. In the center create a point where needles will move across the point. Then divide the circle into four sections. Create three different sizes or needles with different colors for minutes, seconds, and hours.

The last part is to move the needles across the axis and set the animation time according to minutes, seconds, and hours. This clock is showing the right time because it has the complete functionality of the analog clock.

Play and Pause Button:

Play and pause buttons are used in audio and video media players. It helps to start and stop the music or video. The design and functionality are set in this button. You just need to put this code into your player or connect it with your player.

Animated tab bar:

The tab bar helps the user to switch between different items. It is done using the buttons and the buttons are available in this design. The active and inactive buttons have different designs. After clicking on any tab it’s changing its style. So, the complete code is below or the tab bar is below.

Search bar in Html, CSS, and Javascript:

Now we have created a search bar using Html CSS and JavaScript. It has the complete functionality of the search bar. You can implement its code in your web page and its style is can be customized as well. Neumorphic design can be changed with other colors or designs. This search bar will help you to search the content on the complete website as well.

Input text field in Html and CSS:

The input text field is used to enter the text. When you want to enter your information then you have to put that information in the input fields. Input fields have different types like number, email, text,t date, etc. All these input fields are different from each other because each one has different functionalities. You can use this input field in your login or registration form as well.

Icons or Bottom navigation bar:

We have imported the icons. These icons have the same color and size. They are account/user, setting, and home icons. There are different ways for using icons in Html and CSS coding. I recommend you use fontawesome icons because it has a lot of icons and you can easily use these icons in your project.

Input text field in Html and CSS:

Price range slider:

This slider is used for various purposes. It is usually used in eCommerce websites or service websites. When you use the filter option then you have to use this slider. So, you can set the minimum and maximum values of the slider as well. If you want to learn the complete price range slider then click here.

How to create neumorphic design effects in Html, CSS, and Javascript?

If you want to implement these designs on your web page then you have to follow the below steps. These steps will help you to create any type of neumorphic design. Because we have created 12 different neumorphic designs and they will help you to create a new design for your web as well.

Download code editor
Html source code
CSS source code
Download source code

Html source code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neumorphic Designs - FantacyDesigns </title>
    <link rel="stylesheet" href="style.css">

</head>

<body>
   <div class="container">
  <div class="components">
    
    <div class="switch">
      <div class="switch__1">
        <input id="switch-1" type="checkbox">
        <label for="switch-1"></label>
      </div>
      
      <div class="switch__2">
        <input id="switch-2" type="checkbox" checked>
        <label for="switch-2"></label>
      </div>
    </div>
    
    <div class="checkbox">
      <div class="checkbox__1">
        <input id="checkbox-1" type="checkbox">
        <label for="checkbox-1">
          <i class="material-icons">done</i></label>
      </div>
      <div class="checkbox__2">
        <input id="checkbox-2" type="checkbox" checked>
        <label for="checkbox-2">
          <i class="material-icons">done</i></label>
      </div>
    </div>
    
    <div class="radio">
      <div class="radio__1">
        <input id="radio-1" type="radio"  name="radio" value="1">
        <label for="radio-1"></label>
      </div>
      
      <div class="radio__2">
        <input id="radio-2" type="radio" name="radio" value="2" checked>
        <label for="radio-2"></label>
      </div>
    </div>
    
    <div class="btn btn__primary"><p>Button</p></div>
    <div class="btn btn__secondary"><p>Button</p></div>
    
    <div class="clock">
      <div class="hand hours"></div>
      <div class="hand minutes"></div>
      <div class="hand seconds"></div>
      <div class="point"></div>
      <div class="marker">
        <span class="marker__1"></span>
        <span class="marker__2"></span>
        <span class="marker__3"></span>
        <span class="marker__4"></span>
      </div>
    </div>
    
    <div class="chip">
      <div class="chip__icon">
        <ion-icon name="color-palette"></ion-icon></div>
      <p>Neumorphic Design</p>
      <div class="chip__close">
        <ion-icon name="close"></ion-icon>
      </div>
    </div>
    
    <div class="circle">
      <span class="circle__btn">
        <ion-icon class="pause" name="pause"></ion-icon>
        <ion-icon class="play" name="play"></ion-icon>
      </span>
      <span class="circle__back-1"></span>
      <span class="circle__back-2"></span>
    </div>
    
    <div class="form">
      <input type="text" class="form__input" placeholder="Type anything...">
    </div>
    
    <div class="search">
      <input type="text" class="search__input" placeholder="Search...">
      <div class="search__icon">
        <ion-icon name="search"></ion-icon>
      </div>
    </div>
    
    <div class="segmented-control">
      
      <input type="radio" name="radio2" value="3" id="tab-1" checked/>
      <label for="tab-1" class= "segmented-control__1">
        <p>Tab 1</p></label>
      
      <input type="radio" name="radio2" value="4" id="tab-2" />
      <label for="tab-2" class= "segmented-control__2">
        <p>Tab 2</p></label>
      
      <input type="radio" name="radio2" value="5" id="tab-3" />
      <label for="tab-3" class= "segmented-control__3">
        <p>Tab 3</p></label>
      
      <div class="segmented-control__color"></div>
    </div>
    
    <div class="icon">
      <div class="icon__home">
        <ion-icon name="home"></ion-icon></div>
      <div class="icon__account">
        <ion-icon name="person"></ion-icon></div>
      <div class="icon__settings">
        <ion-icon name="settings"></ion-icon></div>
    </div>
    
    <div class="slider">
      <div class="slider__box">
        <span class="slider__btn" id="find"></span>
        <span class="slider__color"></span>
        <span class="slider__tooltip">50%</span>
      </div>
    </div>
  </div>
  <a href="https://dribbble.com/myacode" class="dribbble" target="_blank"><ion-icon name="logo-dribbble"></ion-icon></a>
</div>

</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

<!DOCTYPE html>

<head>

<title>Neumorphic Designs - FantacyDesigns </title>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="btn btn__primary"><p>Button</p></div>

<div class="btn btn__secondary"><p>Button</p></div>

</div>

<ion-icon name="color-palette"></ion-icon></div>

<p>Neumorphic Design</p>

<ion-icon name="close"></ion-icon>

</div>

<ion-icon class="pause" name="pause"></ion-icon>

<ion-icon class="play" name="play"></ion-icon>

</span>

</div>

</div>

<ion-icon name="search"></ion-icon>

</div>

</div>

<ion-icon name="home"></ion-icon></div>

<ion-icon name="person"></ion-icon></div>

<ion-icon name="settings"></ion-icon></div>

</div>

</div>

</div>

</body>

</html>

CSS source code

:root {
  --primary-light: #8abdff;
  --primary: #6d5dfc;
  --primary-dark: #5b0eeb;
  --white: #FFFFFF;
  --greyLight-1: #E4EBF5;
  --greyLight-2: #c8d0e7;
  --greyLight-3: #bec8e4;
  --greyDark: #9baacf;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  overflow-y: scroll;
  background: var(--greyLight-1);
}
@media screen and (min-width: 900px) {
  html {
    font-size: 75%;
  }
}

.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Poppins", sans-serif;
  background: var(--greyLight-1);
}

.components {
  width: 75rem;
  height: 40rem;
  border-radius: 3rem;
  box-shadow: 0.8rem 0.8rem 1.4rem var(--greyLight-2), -0.2rem -0.2rem 1.8rem var(--white);
  padding: 4rem;
  display: grid;
  grid-template-columns: 17.6rem 19rem 20.4rem;
  grid-template-rows: repeat(autofit, -webkit-min-content);
  grid-template-rows: repeat(autofit, min-content);
  grid-column-gap: 5rem;
  grid-row-gap: 2.5rem;
  align-items: center;
}

/*  SWITCH  */
.switch {
  grid-column: 1/2;
  display: grid;
  grid-template-columns: repeat(2, -webkit-min-content);
  grid-template-columns: repeat(2, min-content);
  grid-gap: 3rem;
  justify-self: center;
}
.switch input {
  display: none;
}
.switch__1, .switch__2 {
  width: 6rem;
}
.switch__1 label, .switch__2 label {
  display: flex;
  align-items: center;
  width: 100%;
  height: 3rem;
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  background: rgba(255, 255, 255, 0);
  position: relative;
  cursor: pointer;
  border-radius: 1.6rem;
}
.switch__1 label::after, .switch__2 label::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--greyDark);
  transition: all 0.4s ease;
}
.switch__1 label::before, .switch__2 label::before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(330deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
  opacity: 0;
  transition: all 0.4s ease;
}
.switch input:checked ~ label::before {
  opacity: 1;
}
.switch input:checked ~ label::after {
  left: 57%;
  background: var(--greyLight-1);
}

/*  CHECKBOX  */
.checkbox {
  grid-column: 1/2;
  display: grid;
  grid-template-columns: repeat(2, 6rem);
  grid-gap: 3rem;
  justify-content: center;
}
.checkbox input {
  display: none;
}
.checkbox__1, .checkbox__2 {
  width: 6rem;
  display: flex;
  justify-content: center;
}
.checkbox__1 label, .checkbox__2 label {
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  width: 2.8rem;
  height: 2.8rem;
}
.checkbox__1 label:hover i, .checkbox__2 label:hover i {
  color: var(--primary);
}
.checkbox__1 label i, .checkbox__2 label i {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--greyDark);
  transition: 0.3s ease;
}
.checkbox__1 input:checked ~ label, .checkbox__2 input:checked ~ label {
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
}
.checkbox__1 input:checked ~ label i, .checkbox__2 input:checked ~ label i {
  color: var(--primary);
}

/*  RADIO  */
.radio {
  grid-column: 1/2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
}
.radio input {
  display: none;
}
.radio__1 input:checked ~ label, .radio__2 input:checked ~ label {
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
}
.radio__1 input:checked ~ label::after, .radio__2 input:checked ~ label::after {
  background: var(--primary);
}
.radio__1 label, .radio__2 label {
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
}
.radio__1 label:hover::after, .radio__2 label:hover::after {
  background: var(--primary);
}
.radio__1 label::after, .radio__2 label::after {
  content: "";
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  background: var(--greyDark);
  border-radius: 50%;
  transition: 0.3s ease;
}

/*  BUTTONS  */
.btn {
  width: 15rem;
  height: 4rem;
  border-radius: 1rem;
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s ease;
}
.btn__primary {
  grid-column: 1/2;
  grid-row: 4/5;
  background: var(--primary);
  box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-light), inset -0.2rem -0.2rem 1rem var(--primary-dark), 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  color: var(--greyLight-1);
}
.btn__primary:hover {
  color: var(--white);
}
.btn__primary:active {
  box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-dark), inset -0.2rem -0.2rem 1rem var(--primary-light);
}
.btn__secondary {
  grid-column: 1/2;
  grid-row: 5/6;
  color: var(--greyDark);
}
.btn__secondary:hover {
  color: var(--primary);
}
.btn__secondary:active {
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
}
.btn p {
  font-size: 1.6rem;
}

/*  CLOCK  */
.clock {
  grid-column: 2/3;
  grid-row: 1/3;
  width: 12rem;
  height: 12rem;
  justify-self: center;
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.clock .hand {
  position: absolute;
  transform-origin: bottom;
  bottom: 6rem;
  border-radius: 0.2rem;
  z-index: 200;
}
.clock .hours {
  width: 0.4rem;
  height: 3.2rem;
  background: var(--greyLight-3);
}
.clock .minutes {
  width: 0.4rem;
  height: 4.6rem;
  background: var(--greyDark);
}
.clock .seconds {
  width: 0.2rem;
  height: 5.2rem;
  background: var(--primary);
}
.clock .point {
  position: absolute;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--primary);
  z-index: 300;
}
.clock .marker {
  width: 95%;
  height: 95%;
  border-radius: 50%;
  position: relative;
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
}
.clock .marker::after {
  content: "";
  width: 60%;
  height: 60%;
  position: absolute;
  box-shadow: inset 1px 1px 1px var(--greyLight-2), inset -1px -1px 1px var(--white);
  border-radius: 50%;
  top: 20%;
  left: 20%;
  filter: blur(1px);
}
.clock .marker__1, .clock .marker__2, .clock .marker__3, .clock .marker__4 {
  position: absolute;
  border-radius: 0.1rem;
  box-shadow: inset 1px 1px 1px var(--greyLight-2), inset -1px -1px 1px var(--white);
}
.clock .marker__1, .clock .marker__2 {
  width: 0.2rem;
  height: 0.6rem;
  left: 5.6rem;
}
.clock .marker__3, .clock .marker__4 {
  width: 0.6rem;
  height: 0.2rem;
  top: 5.6rem;
}
.clock .marker__1 {
  top: 2%;
}
.clock .marker__2 {
  top: 98%;
  transform: translateY(-0.6rem);
}
.clock .marker__3 {
  left: 2%;
}
.clock .marker__4 {
  left: 98%;
  transform: translateX(-0.6rem);
}

/*  CHIP  */
.chip {
  grid-column: 2/3;
  grid-row: 3/4;
  justify-self: center;
  width: 17rem;
  height: 4rem;
  border-radius: 1rem;
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chip__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  margin: 0 0 0 0.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  color: var(--primary);
}
.chip p {
  font-size: 0.9rem;
  margin-left: -1.8rem;
  color: var(--greyDark);
}
.chip__close {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0 0.5rem;
  display: flex;
  font-size: 1.6rem;
  color: var(--greyLight-3);
  cursor: pointer;
}

/*  PLAY BUTTON  */
.circle {
  grid-column: 2/3;
  grid-row: 4/6;
  width: 9rem;
  height: 100%;
  justify-self: center;
  border-radius: 1rem;
  display: grid;
  grid-template-rows: 1fr;
  justify-items: center;
  align-items: center;
}
.circle__btn {
  grid-row: 1/2;
  grid-column: 1/2;
  width: 6rem;
  height: 6rem;
  display: flex;
  margin: 0.6rem;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 3.2rem;
  color: var(--primary);
  z-index: 300;
  background: var(--greyLight-1);
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  cursor: pointer;
  position: relative;
}
.circle__btn.shadow {
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
}
.circle__btn .play {
  position: absolute;
  opacity: 0;
  transition: all 0.2s linear;
}
.circle__btn .play.visibility {
  opacity: 1;
}
.circle__btn .pause {
  position: absolute;
  transition: all 0.2s linear;
}
.circle__btn .pause.visibility {
  opacity: 0;
}
.circle__back-1, .circle__back-2 {
  grid-row: 1/2;
  grid-column: 1/2;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  filter: blur(1px);
  z-index: 100;
}
.circle__back-1 {
  box-shadow: 0.4rem 0.4rem 0.8rem var(--greyLight-2), -0.4rem -0.4rem 0.8rem var(--white);
  background: linear-gradient(to bottom right, var(--greyLight-2) 0%, var(--white) 100%);
  -webkit-animation: waves 4s linear infinite;
          animation: waves 4s linear infinite;
}
.circle__back-1.paused {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.circle__back-2 {
  box-shadow: 0.4rem 0.4rem 0.8rem var(--greyLight-2), -0.4rem -0.4rem 0.8rem var(--white);
  -webkit-animation: waves 4s linear 2s infinite;
          animation: waves 4s linear 2s infinite;
}
.circle__back-2.paused {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

/*  FORM  */
.form {
  grid-column: 3/4;
  grid-row: 3/4;
}
.form__input {
  width: 20.4rem;
  height: 4rem;
  border: none;
  border-radius: 1rem;
  font-size: 1.4rem;
  padding-left: 1.4rem;
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
  background: none;
  font-family: inherit;
  color: var(--greyDark);
}
.form__input::-moz-placeholder {
  color: var(--greyLight-3);
}
.form__input:-ms-input-placeholder {
  color: var(--greyLight-3);
}
.form__input::placeholder {
  color: var(--greyLight-3);
}
.form__input:focus {
  outline: none;
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
}

/*  SEARCH  */
.search {
  grid-column: 3/4;
  grid-row: 2/3;
  position: relative;
  display: flex;
  align-items: center;
}
.search__input {
  width: 20.4rem;
  height: 4rem;
  border: none;
  border-radius: 1rem;
  font-size: 1.4rem;
  padding-left: 3.8rem;
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
  background: none;
  font-family: inherit;
  color: var(--greyDark);
}
.search__input::-moz-placeholder {
  color: var(--greyLight-3);
}
.search__input:-ms-input-placeholder {
  color: var(--greyLight-3);
}
.search__input::placeholder {
  color: var(--greyLight-3);
}
.search__input:focus {
  outline: none;
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
}
.search__input:focus + .search__icon {
  color: var(--primary);
}
.search__icon {
  height: 2rem;
  position: absolute;
  font-size: 2rem;
  padding: 0 1rem;
  display: flex;
  color: var(--greyDark);
  transition: 0.3s ease;
}

/*  SEGMENTED-CONTROL */
.segmented-control {
  grid-column: 3/4;
  grid-row: 1/2;
  width: 20.4rem;
  height: 4rem;
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  position: relative;
}
.segmented-control input {
  display: none;
}
.segmented-control > input:checked + label {
  transition: all 0.5s ease;
  color: var(--primary);
}
.segmented-control__1, .segmented-control__2, .segmented-control__3 {
  width: 6.8rem;
  height: 3.6rem;
  font-size: 1.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--greyDark);
  transition: all 0.5s ease;
}
.segmented-control__1:hover, .segmented-control__2:hover, .segmented-control__3:hover {
  color: var(--primary);
}
.segmented-control__color {
  position: absolute;
  height: 3.4rem;
  width: 6.2rem;
  margin-left: 0.3rem;
  border-radius: 0.8rem;
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
  pointer-events: none;
}

#tab-1:checked ~ .segmented-control__color {
  transform: translateX(0);
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#tab-2:checked ~ .segmented-control__color {
  transform: translateX(6.8rem);
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#tab-3:checked ~ .segmented-control__color {
  transform: translateX(13.6rem);
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/*  ICONS  */
.icon {
  grid-column: 3/4;
  grid-row: 4/5;
  display: flex;
  justify-content: space-between;
}
.icon__account, .icon__home, .icon__settings {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  cursor: pointer;
  color: var(--greyDark);
  transition: all 0.5s ease;
}
.icon__account:active, .icon__home:active, .icon__settings:active {
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
  color: var(--primary);
}
.icon__account:hover, .icon__home:hover, .icon__settings:hover {
  color: var(--primary);
}

/*  RANGE-SLIDER  */
.slider {
  grid-column: 3/4;
  grid-row: 5/6;
  align-self: center;
  display: flex;
  flex-direction: column;
}
.slider__box {
  width: 100%;
  height: 1rem;
  cursor: pointer;
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
  border-radius: 1rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.slider__btn {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--white);
  position: absolute;
  box-shadow: 0px 0.1rem 0.3rem 0px var(--greyLight-3);
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
}
.slider__btn:hover ~ .slider__tooltip {
  opacity: 1;
}
.slider__btn::after {
  content: "";
  position: absolute;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
}
.slider__color {
  height: 100%;
  width: 50%;
  position: absolute;
  left: 0;
  z-index: 100;
  border-radius: inherit;
  background: var(--primary);
  background: linear-gradient(-1deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
}
.slider__tooltip {
  position: absolute;
  top: 2.6rem;
  height: 2.5rem;
  width: 3rem;
  border-radius: 0.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  color: var(--primary);
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  opacity: 0;
  transition: opacity 0.3s ease;
}

@-webkit-keyframes waves {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes waves {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
.dribbble {
  position: fixed;
  font-size: 2.6rem;
  right: 2rem;
  bottom: 1rem;
  color: #EA4C89;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

578

579

580

581

582

583

584

585

586

587

588

589

590

591

592

593

594

595

596

597

598

599

600

601

602

603

604

605

606

607

608

609

610

611

612

613

614

615

616

617

618

619

620

621

622

623

624

625

626

627

628

629

630

631

632

633

634

635

636

637

638

639

640

641

642

643

644

645

646

647

648

649

650

651

652

653

654

655

656

657

658

659

660

661

662

663

664

665

666

667

668

669

670

671

672

673

674

675

676

677

678

679

680

681

682

683

684

685

686

687

688

689

690

691

692

693

694

695

696

697

698

699

700

701

702

703

704

:root {

--primary-light: #8abdff;

--primary: #6d5dfc;

--primary-dark: #5b0eeb;

--white: #FFFFFF;

--greyLight-1: #E4EBF5;

--greyLight-2: #c8d0e7;

--greyLight-3: #bec8e4;

--greyDark: #9baacf;

}

*, *::before, *::after {

margin: 0;

padding: 0;

box-sizing: inherit;

}

html {

box-sizing: border-box;

font-size: 62.5%;

overflow-y: scroll;

background: var(--greyLight-1);

}

@media screen and (min-width: 900px) {

html {

font-size: 75%;

}

.container {

min-height: 100vh;

display: flex;

justify-content: center;

align-items: center;

font-family: "Poppins", sans-serif;

background: var(--greyLight-1);

}

.components {

width: 75rem;

height: 40rem;

border-radius: 3rem;

box-shadow: 0.8rem 0.8rem 1.4rem var(--greyLight-2), -0.2rem -0.2rem 1.8rem var(--white);

padding: 4rem;

display: grid;

grid-template-columns: 17.6rem 19rem 20.4rem;

grid-template-rows: repeat(autofit, -webkit-min-content);

grid-template-rows: repeat(autofit, min-content);

grid-column-gap: 5rem;

grid-row-gap: 2.5rem;

align-items: center;

}

/* SWITCH */

.switch {

grid-column: 1/2;

display: grid;

grid-template-columns: repeat(2, -webkit-min-content);

grid-template-columns: repeat(2, min-content);

grid-gap: 3rem;

justify-self: center;

}

.switch input {

display: none;

}

.switch__1, .switch__2 {

width: 6rem;

}

.switch__1 label, .switch__2 label {

display: flex;

align-items: center;

width: 100%;

height: 3rem;

box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);

background: rgba(255, 255, 255, 0);

position: relative;

cursor: pointer;

border-radius: 1.6rem;

}

.switch__1 label::after, .switch__2 label::after {

content: "";

position: absolute;

left: 0.4rem;

width: 2.1rem;

height: 2.1rem;

border-radius: 50%;

background: var(--greyDark);

transition: all 0.4s ease;

}

.switch__1 label::before, .switch__2 label::before {

content: "";

width: 100%;

height: 100%;

border-radius: inherit;

background: linear-gradient(330deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);

opacity: 0;

transition: all 0.4s ease;

}

.switch input:checked ~ label::before {

opacity: 1;

}

.switch input:checked ~ label::after {

left: 57%;

background: var(--greyLight-1);

}

/* CHECKBOX */

.checkbox {

grid-column: 1/2;

display: grid;

grid-template-columns: repeat(2, 6rem);

grid-gap: 3rem;

justify-content: center;

}

.checkbox input {

display: none;

}

.checkbox__1, .checkbox__2 {

width: 6rem;

display: flex;

justify-content: center;

}

.checkbox__1 label, .checkbox__2 label {

box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);

cursor: pointer;

position: relative;

display: flex;

justify-content: center;

align-items: center;

border-radius: 0.5rem;

width: 2.8rem;

height: 2.8rem;

}

.checkbox__1 label:hover i, .checkbox__2 label:hover i {

color: var(--primary);

}

.checkbox__1 label i, .checkbox__2 label i {

font-size: 1.8rem;

font-weight: 700;

color: var(--greyDark);

transition: 0.3s ease;

}

.checkbox__1 input:checked ~ label, .checkbox__2 input:checked ~ label {

box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);

}

.checkbox__1 input:checked ~ label i, .checkbox__2 input:checked ~ label i {

color: var(--primary);

}

/* RADIO */

.radio {

grid-column: 1/2;

display: grid;

grid-template-columns: repeat(2, 1fr);

justify-items: center;

}

.radio input {

display: none;

}

.radio__1 input:checked ~ label, .radio__2 input:checked ~ label {

box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);

}

.radio__1 input:checked ~ label::after, .radio__2 input:checked ~ label::after {

background: var(--primary);

}

.radio__1 label, .radio__2 label {

box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);

position: relative;

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

width: 2.8rem;

height: 2.8rem;

border-radius: 50%;

}

.radio__1 label:hover::after, .radio__2 label:hover::after {

background: var(--primary);

}

.radio__1 label::after, .radio__2 label::after {

content: "";

position: absolute;

width: 1.4rem;

height: 1.4rem;

background: var(--greyDark);

border-radius: 50%;

transition: 0.3s ease;

}

/* BUTTONS */

.btn {

width: 15rem;

height: 4rem;

border-radius: 1rem;

box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);

justify-self: center;

display: flex;

align-items: center;

justify-content: center;

cursor: pointer;

transition: 0.3s ease;

}

.btn__primary {

grid-column: 1/2;

grid-row: 4/5;

background: var(--primary);

box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-light), inset -0.2rem -0.2rem 1rem var(--primary-dark), 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);

color: var(--greyLight-1);

}

.btn__primary:hover {

color: var(--white);

}

.btn__primary:active {

box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-dark), inset -0.2rem -0.2rem 1rem var(--primary-light);

}

.btn__secondary {

grid-column: 1/2;

grid-row: 5/6;

color: var(--greyDark);

}

.btn__secondary:hover {

color: var(--primary);

}

.btn__secondary:active {

box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);

}

.btn p {

font-size: 1.6rem;

}

/* CLOCK */

.clock {

grid-column: 2/3;

grid-row: 1/3;

width: 12rem;

height: 12rem;

justify-self: center;

box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

position: relative;

}

.clock .hand {

position: absolute;

transform-origin: bottom;

bottom: 6rem;

border-radius: 0.2rem;

z-index: 200;

}

.clock .hours {

width: 0.4rem;

height: 3.2rem;

background: var(--greyLight-3);

}

.clock .minutes {

width: 0.4rem;

height: 4.6rem;

background: var(--greyDark);

}

.clock .seconds {

width: 0.2rem;

height: 5.2rem;

background: var(--primary);

}

.clock .point {

position: absolute;

width: 0.8rem;

height: 0.8rem;

border-radius: 50%;

background: var(--primary);

z-index: 300;

}

.clock .marker {

width: 95%;

height: 95%;

border-radius: 50%;

position: relative;

box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);

}

.clock .marker::after {

content: "";

width: 60%;

height: 60%;

position: absolute;

box-shadow: inset 1px 1px 1px var(--greyLight-2), inset -1px -1px 1px var(--white);

border-radius: 50%;

top: 20%;

left: 20%;

filter: blur(1px);

}

.clock .marker__1, .clock .marker__2, .clock .marker__3, .clock .marker__4 {

position: absolute;

border-radius: 0.1rem;

box-shadow: inset 1px 1px 1px var(--greyLight-2), inset -1px -1px 1px var(--white);

}

.clock .marker__1, .clock .marker__2 {

width: 0.2rem;

height: 0.6rem;

left: 5.6rem;

}

.clock .marker__3, .clock .marker__4 {

width: 0.6rem;

height: 0.2rem;

top: 5.6rem;

}

.clock .marker__1 {

top: 2%;

}

.clock .marker__2 {

top: 98%;

transform: translateY(-0.6rem);

}

.clock .marker__3 {

left: 2%;

}

.clock .marker__4 {

left: 98%;

transform: translateX(-0.6rem);

}

/* CHIP */

.chip {

grid-column: 2/3;

grid-row: 3/4;

justify-self: center;

width: 17rem;

height: 4rem;

border-radius: 1rem;

box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);

display: flex;

justify-content: space-between;

align-items: center;

}

.chip__icon {

width: 3rem;

height: 3rem;

border-radius: 1rem;

margin: 0 0 0 0.2rem;

display: flex;

justify-content: center;

align-items: center;

font-size: 1.8rem;

color: var(--primary);

}

.chip p {

font-size: 0.9rem;

margin-left: -1.8rem;

color: var(--greyDark);

}

.chip__close {

width: 1.6rem;

height: 1.6rem;

margin: 0 0.5rem;

display: flex;

font-size: 1.6rem;

color: var(--greyLight-3);

cursor: pointer;

}

/* PLAY BUTTON */

.circle {

grid-column: 2/3;

grid-row: 4/6;

width: 9rem;

height: 100%;

justify-self: center;

border-radius: 1rem;

display: grid;

grid-template-rows: 1fr;

justify-items: center;

align-items: center;

}

.circle__btn {

grid-row: 1/2;

grid-column: 1/2;

width: 6rem;

height: 6rem;

display: flex;

margin: 0.6rem;

justify-content: center;

align-items: center;

border-radius: 50%;

font-size: 3.2rem;

color: var(--primary);

z-index: 300;

background: var(--greyLight-1);

box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);

cursor: pointer;

position: relative;

}

.circle__btn.shadow {

box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);

}

.circle__btn .play {

position: absolute;

opacity: 0;

transition: all 0.2s linear;

}

.circle__btn .play.visibility {

opacity: 1;

}

.circle__btn .pause {

position: absolute;

transition: all 0.2s linear;

}

.circle__btn .pause.visibility {

opacity: 0;

}

.circle__back-1, .circle__back-2 {

grid-row: 1/2;

grid-column: 1/2;

width: 6rem;

height: 6rem;

border-radius: 50%;

filter: blur(1px);

z-index: 100;

}

.circle__back-1 {

box-shadow: 0.4rem 0.4rem 0.8rem var(--greyLight-2), -0.4rem -0.4rem 0.8rem var(--white);

background: linear-gradient(to bottom right, var(--greyLight-2) 0%, var(--white) 100%);

-webkit-animation: waves 4s linear infinite;

animation: waves 4s linear infinite;

}

.circle__back-1.paused {

-webkit-animation-play-state: paused;

animation-play-state: paused;

}

.circle__back-2 {

box-shadow: 0.4rem 0.4rem 0.8rem var(--greyLight-2), -0.4rem -0.4rem 0.8rem var(--white);

-webkit-animation: waves 4s linear 2s infinite;

animation: waves 4s linear 2s infinite;

}

.circle__back-2.paused {

-webkit-animation-play-state: paused;

animation-play-state: paused;

}

/* FORM */

.form {

grid-column: 3/4;

grid-row: 3/4;

}

.form__input {

width: 20.4rem;

height: 4rem;

border: none;

border-radius: 1rem;

font-size: 1.4rem;

padding-left: 1.4rem;

box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);

background: none;

font-family: inherit;

color: var(--greyDark);

}

.form__input::-moz-placeholder {

color: var(--greyLight-3);

}

.form__input:-ms-input-placeholder {

color: var(--greyLight-3);

}

.form__input::placeholder {

color: var(--greyLight-3);

}

.form__input:focus {

outline: none;

box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);

}

/* SEARCH */

.search {

grid-column: 3/4;

grid-row: 2/3;

position: relative;

display: flex;

align-items: center;

}

.search__input {

width: 20.4rem;

height: 4rem;

border: none;

border-radius: 1rem;

font-size: 1.4rem;

padding-left: 3.8rem;

box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);

background: none;

font-family: inherit;

color: var(--greyDark);

}

.search__input::-moz-placeholder {

color: var(--greyLight-3);

}

.search__input:-ms-input-placeholder {

color: var(--greyLight-3);

}

.search__input::placeholder {

color: var(--greyLight-3);

}

.search__input:focus {

outline: none;

box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);

}

.search__input:focus + .search__icon {

color: var(--primary);

}

.search__icon {

height: 2rem;

position: absolute;

font-size: 2rem;

padding: 0 1rem;

display: flex;

color: var(--greyDark);

transition: 0.3s ease;

}

/* SEGMENTED-CONTROL */

.segmented-control {

grid-column: 3/4;

grid-row: 1/2;

width: 20.4rem;

height: 4rem;

box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);

border-radius: 1rem;

display: flex;

align-items: center;

position: relative;

}

.segmented-control input {

display: none;

}

.segmented-control > input:checked + label {

transition: all 0.5s ease;

color: var(--primary);

}

.segmented-control__1, .segmented-control__2, .segmented-control__3 {

width: 6.8rem;

height: 3.6rem;

font-size: 1.4rem;

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

color: var(--greyDark);

transition: all 0.5s ease;

}

.segmented-control__1:hover, .segmented-control__2:hover, .segmented-control__3:hover {

color: var(--primary);

}

.segmented-control__color {

position: absolute;

height: 3.4rem;

width: 6.2rem;

margin-left: 0.3rem;

border-radius: 0.8rem;

box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);

pointer-events: none;

}

#tab-1:checked ~ .segmented-control__color {

transform: translateX(0);

transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

}

#tab-2:checked ~ .segmented-control__color {

transform: translateX(6.8rem);

transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

}

#tab-3:checked ~ .segmented-control__color {

transform: translateX(13.6rem);

transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

}

/* ICONS */

.icon {

grid-column: 3/4;

grid-row: 4/5;

display: flex;

justify-content: space-between;

}

.icon__account, .icon__home, .icon__settings {

width: 4rem;

height: 4rem;

border-radius: 50%;

box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);

display: flex;

justify-content: center;

align-items: center;

font-size: 2rem;

cursor: pointer;

color: var(--greyDark);

transition: all 0.5s ease;

}

.icon__account:active, .icon__home:active, .icon__settings:active {

box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);

color: var(--primary);

}

.icon__account:hover, .icon__home:hover, .icon__settings:hover {

color: var(--primary);

}

/* RANGE-SLIDER */

.slider {

grid-column: 3/4;

grid-row: 5/6;

align-self: center;

display: flex;

flex-direction: column;

}

.slider__box {

width: 100%;

height: 1rem;

cursor: pointer;

box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);

border-radius: 1rem;

position: relative;

display: flex;

justify-content: center;

align-items: center;

}

.slider__btn {

width: 2rem;

height: 2rem;

border-radius: 50%;

background: var(--white);

position: absolute;

box-shadow: 0px 0.1rem 0.3rem 0px var(--greyLight-3);

z-index: 200;

display: flex;

justify-content: center;

align-items: center;

}

.slider__btn:hover ~ .slider__tooltip {

opacity: 1;

}

.slider__btn::after {

content: "";

position: absolute;

width: 0.8rem;

height: 0.8rem;

border-radius: 50%;

box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);

}

.slider__color {

height: 100%;

width: 50%;

position: absolute;

left: 0;

z-index: 100;

border-radius: inherit;

background: var(--primary);

background: linear-gradient(-1deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);

}

.slider__tooltip {

position: absolute;

top: 2.6rem;

height: 2.5rem;

width: 3rem;

border-radius: 0.6rem;

display: flex;

justify-content: center;

align-items: center;

font-size: 1.2rem;

color: var(--primary);

box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);

opacity: 0;

transition: opacity 0.3s ease;

}

@-webkit-keyframes waves {

0% {

transform: scale(1);

opacity: 1;

}

50% {

opacity: 1;

}

100% {

transform: scale(2);

opacity: 0;

}

@keyframes waves {

0% {

transform: scale(1);

opacity: 1;

}

50% {

opacity: 1;

}

100% {

transform: scale(2);

opacity: 0;

}

.dribbble {

position: fixed;

font-size: 2.6rem;

right: 2rem;

bottom: 1rem;

color: #EA4C89;

}

Javascript source code

    <script>
/*  clock */
const hours = document.querySelector(".hours");
const minutes = document.querySelector(".minutes");
const seconds = document.querySelector(".seconds");

/*  play button */
const play = document.querySelector(".play");
const pause = document.querySelector(".pause");
const playBtn = document.querySelector(".circle__btn");
const wave1 = document.querySelector(".circle__back-1");
const wave2 = document.querySelector(".circle__back-2");

/*  rate slider */
const container = document.querySelector(".slider__box");
const btn = document.querySelector(".slider__btn");
const color = document.querySelector(".slider__color");
const tooltip = document.querySelector(".slider__tooltip");

clock = () => {
  let today = new Date();
  let h = (today.getHours() % 12) + today.getMinutes() / 59; // 22 % 12 = 10pm
  let m = today.getMinutes(); // 0 - 59
  let s = today.getSeconds(); // 0 - 59

  h *= 30; // 12 * 30 = 360deg
  m *= 6;
  s *= 6; // 60 * 6 = 360deg

  rotation(hours, h);
  rotation(minutes, m);
  rotation(seconds, s);

  // call every second
  setTimeout(clock, 500);
};

rotation = (target, val) => {
  target.style.transform = `rotate(${val}deg)`;
};

window.onload = clock();

dragElement = (target, btn) => {
  target.addEventListener("mousedown", (e) => {
    onMouseMove(e);
    window.addEventListener("mousemove", onMouseMove);
    window.addEventListener("mouseup", onMouseUp);
  });

  onMouseMove = (e) => {
    e.preventDefault();
    let targetRect = target.getBoundingClientRect();
    let x = e.pageX - targetRect.left + 10;
    if (x > targetRect.width) {
      x = targetRect.width;
    }
    if (x < 0) {
      x = 0;
    }
    btn.x = x - 10;
    btn.style.left = btn.x + "px";

    // get the position of the button inside the container (%)
    let percentPosition = ((btn.x + 10) / targetRect.width) * 100;

    // color width = position of button (%)
    color.style.width = percentPosition + "%";

    // move the tooltip when button moves, and show the tooltip
    tooltip.style.left = btn.x - 5 + "px";
    tooltip.style.opacity = 1;

    // show the percentage in the tooltip
    tooltip.textContent = Math.round(percentPosition) + "%";
  };

  onMouseUp = (e) => {
    window.removeEventListener("mousemove", onMouseMove);
    tooltip.style.opacity = 0;

    btn.addEventListener("mouseover", function () {
      tooltip.style.opacity = 1;
    });

    btn.addEventListener("mouseout", function () {
      tooltip.style.opacity = 0;
    });
  };
};

dragElement(container, btn);

/*  play button  */
playBtn.addEventListener("click", function (e) {
  e.preventDefault();
  pause.classList.toggle("visibility");
  play.classList.toggle("visibility");
  playBtn.classList.toggle("shadow");
  wave1.classList.toggle("paused");
  wave2.classList.toggle("paused");
});

    </script>

100

101

102

103

104

/* clock */

const hours = document.querySelector(".hours");

const minutes = document.querySelector(".minutes");

const seconds = document.querySelector(".seconds");

/* play button */

const play = document.querySelector(".play");

const pause = document.querySelector(".pause");

const playBtn = document.querySelector(".circle__btn");

const wave1 = document.querySelector(".circle__back-1");

const wave2 = document.querySelector(".circle__back-2");

/* rate slider */

const container = document.querySelector(".slider__box");

const btn = document.querySelector(".slider__btn");

const color = document.querySelector(".slider__color");

const tooltip = document.querySelector(".slider__tooltip");

clock = () => {

let today = new Date();

let h = (today.getHours() % 12) + today.getMinutes() / 59; // 22 % 12 = 10pm

let m = today.getMinutes(); // 0 - 59

let s = today.getSeconds(); // 0 - 59

h *= 30; // 12 * 30 = 360deg

m *= 6;

s *= 6; // 60 * 6 = 360deg

rotation(hours, h);

rotation(minutes, m);

rotation(seconds, s);

// call every second

setTimeout(clock, 500);

};

rotation = (target, val) => {

target.style.transform = `rotate(${val}deg)`;

};

window.onload = clock();

dragElement = (target, btn) => {

target.addEventListener("mousedown", (e) => {

onMouseMove(e);

window.addEventListener("mousemove", onMouseMove);

window.addEventListener("mouseup", onMouseUp);

});

onMouseMove = (e) => {

e.preventDefault();

let targetRect = target.getBoundingClientRect();

let x = e.pageX - targetRect.left + 10;

if (x > targetRect.width) {

x = targetRect.width;

}

if (x < 0) {

x = 0;

}

btn.x = x - 10;

btn.style.left = btn.x + "px";

// get the position of the button inside the container (%)

let percentPosition = ((btn.x + 10) / targetRect.width) * 100;

// color width = position of button (%)

color.style.width = percentPosition + "%";

// move the tooltip when button moves, and show the tooltip

tooltip.style.left = btn.x - 5 + "px";

tooltip.style.opacity = 1;

// show the percentage in the tooltip

tooltip.textContent = Math.round(percentPosition) + "%";

};

onMouseUp = (e) => {

window.removeEventListener("mousemove", onMouseMove);

tooltip.style.opacity = 0;

btn.addEventListener("mouseover", function () {

tooltip.style.opacity = 1;

});

btn.addEventListener("mouseout", function () {

tooltip.style.opacity = 0;

});

};

dragElement(container, btn);

/* play button */

playBtn.addEventListener("click", function (e) {

e.preventDefault();

pause.classList.toggle("visibility");

play.classList.toggle("visibility");

playBtn.classList.toggle("shadow");

wave1.classList.toggle("paused");

wave2.classList.toggle("paused");

});

</script>

Download source code

Download Source CodeClick to Download

Task for Neumorphic Design:

You have gone through a lot of neumorphic designs. Now I am assigning you some tasks related to it and it will help you to master neumorphic design development in HTML, CSS, and javascript.

So, create a simple landing page. Add header and footer of the page. Then create a login or registration form. Also use the neumorphic design in the header, footer, and login form of the page. In this way, you can easily implement these concepts on your web page.