Neumorphic design html elements

Siva Kishore G

Posted : 27 Dec 2021
Modified : 06 Jun 2022

Intermediate Developers

What is Neumorphism?

Neumorphism is a name given to a design trend that makes flat objects look real by applying approriate amount of shadows. The name is derived from "new" + "skeuomorphism" and has quickly took its place in hottest ui/ux trends. I admit, I almost changed my whole website to that. But then I stumbled across the Web Content Accessibility Guidelines requirements.

WCAG Guideline 1.4

This guideline talks about separating foreground from background. G183 says to use a contract ratio of 3:1 with surrounding text. Most of the times, Neumorphic designs fail to follow these guidelines and confuse the user distinguish between clickble and non clickable elements. So, designing your website with this technique requires utmost care.

My suggestion is not to use this kind of design on an e-commerce website or mobile apps. Color blind users will have a hardtime using your website. Your website may even cause you land on lawsuits because it is deemed prejudiced against people with disabilities. You will be surprised by how many lawsuits have been filed for such reasons. Here is an article on The Man Who Filed More Than 180 Disability Lawsuits

But if you are hellbent on doing this, I suggest you to have a strong "Website Usage Policy" on your website to side step those landmines

Hows it's done?

It's basically applying shadows on opposite sides of the element which has same background as the parent element. Typically, these elements looks like they have been extended above the surface, where as in conventional design, elements appear to be floating above the surface. The trick is to apply the same color for the background and the element. Below animaton will depict exaclty that.

Neomorphic Card

Regular Card

Here is a neomorphism generator by Mr.Adam.

Design types

Flat : Apply same color as background
Convex : Apply gradient to the element
Concave : Apply gradient to the element
Indent : Apply insets for shadows

Flat

Convex

Concave

Indent

Examples of neumorphic design

Button

.neoBtn {
  padding:8px 16px;
  border:1px solid #f1f1f1;
  border-radius: 8px;
  background: #f7f7f7;
  outline:none;
  box-shadow:  8px 8px 12px #d2d2d2,
               -8px -8px 12px #ffffff;
}
.neoBtn:hover {
  box-shadow: inset 8px 8px 12px #d2d2d2,
               inset -8px -8px 12px #ffffff;
}

<button class="neoBtn">Submit</button>

Switch

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin:20px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  box-shadow: inset  4px 4px 8px #d2d2d2,
              inset -4px -4px 8px #a9a9a9;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
  box-shadow: inset  4px 4px 8px #366f9d,
              inset 3px 5px 8px #d3ecff;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
#neoBgn {
  background : #f7f7f7;
  text-align:center
}

<div id="neoBgn" class='p-3'>
  <label class="switch">
    <input type="checkbox">
    <span class="slider"></span>
  </label>

  <!-- Rounded switch -->
  <label class="switch">
    <input type="checkbox">
    <span class="slider round"></span>
  </label>
</div>

Form

#neoBgn {
  background : #f7f7f7;
  text-align:center
}

.neoInput{
  margin-top:16px;
  outline:none;
  width:100%;
  height:48px;
  padding-left:12px;
  padding-right:12px;
  box-sizing: border-box;
  border:1px solid #f9f9f9;
  border-radius: 4px;
  background: #f7f7f7;
  box-shadow:  4px 4px 6px #b2b2b2,
               -4px -4px 6px #ffffff;
}
.neoInput:focus {
  border:1px solid #efdcdc;
  box-shadow: inset 4px 4px 6px #d7d7d7,
              inset -4px -4px 6px #f1f1f1;
}
#formContainer {
  max-width:320px;
  margin:20px auto
}
.submitBtn {
  margin-top:24px;
  border:none;
  width:100%;
  border-radius: 4px;
  background: linear-gradient(180deg, #f67272, #cf6060);
  padding:12px;
  color:#fff;
  box-shadow:  4px 4px 6px #b2b2b2,
               -4px -4px 6px #ffffff;
}
#checkBoxHolder {
  margin-top: 20px
}
#agreeConditions {
  margin-right:8px;
  vertical-align:middle;
}

<div id="neoBgn" class='p-3'>
  <form onsubmit="event.preventDefault()" id="formContainer">
    <input class="neoInput" type="text" placeholder="First name" />
    <input class="neoInput" type="text" placeholder="Last name" />
    <input class="neoInput" type="text" placeholder="Phone" />
    <input class="neoInput" type="email" placeholder="john@email.com" />
    <input class="neoInput" type="password" placeholder="password" />
    <div id="checkBoxHolder">
      <input type="checkbox"  id="agreeConditions"/> <label for="agreeConditions">I agree to <a href="#">terms &amp; conditions</a></label>
    </div>
    <button class="submitBtn" type="submit">Submit</button>
  </form>
</div>