CSS Neumorphism code Examples

CSS

HTML

CSS Neumorphism code Examples

1. Neumorphic Shadows

HTML Code

<body>
  <div class="box"></div>
  <div class="box2"></div>
  <div class="circle"></div>
</body>

CSS Code

body{
  height: 100vh;
  width: 100%;
  background: #dde1e7;
  display: flex;
  justify-content: center;
  align-items: center;
}
div{
  height: 150px;
  width: 150px;
  background: #dde1e7;
  border-radius: 20px;
  margin: 20px;
 }
.box{
box-shadow: -5px -5px 9px rgba(255,255,255,0.45), 5px 5px 9px rgba(94,104,121,0.3);
}
.box2{
box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3);
}
.circle{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 50%;
  box-shadow: -5px -5px 9px rgba(255,255,255,0.45), 5px 5px 9px rgba(94,104,121,0.3);
}
.circle::after{
  content: '';
  position: absolute;
  height: 80%;
  width: 80%;
  background-color: transparent;
  border-radius: 50%;
  box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3);
}

2. NEUMORPHISM ON OFF

NEUMORPHISM ON OFF

HTML Code

 <input type="checkbox">

CSS Code

body {
  background-color: #ececec;
  padding: 0px;
  margin: 0px;
}

input[type="checkbox"] {
  width: 200px;
  height: 200px;
  -webkit-appearance: none; /* show none  */
  box-shadow: -10px -10px 15px rgba(255, 255, 255, 0.5),
    10px 10px 15px rgba(70, 70, 70, 0.15);

  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: solid 8px #ececec;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

input[type="checkbox"]::after {
  font-family: "Font Awesome 5 Free";
  content: "\f0eb";
  color: #000;
  font-size: 5rem;
}

input[type="checkbox"]:checked {
  box-shadow: -10px -10px 15px rgba(255, 255, 255, 0.5),
    10px 10px 15px rgba(70, 70, 70, 0.15),
    inset -10px -10px 15px rgba(255, 255, 255, 0.5),
    inset 10px 10px 15px rgba(70, 70, 70, 0.15);
}

input[type="checkbox"]:checked::after {
  color: #ff5c58;
}

3. Creative CSS Animation Effects CSS3 Neumorphism

Creative CSS Animation Effects CSS3 Neumorphism

HTML Code

<div class="loader">
  <div style="--i:0"></div>
  <div style="--i:1"></div>
  <div style="--i:2"></div>
  <div style="--i:3"></div>
  <div style="--i:4"></div>
</div>

CSS Code

* {
	 margin: 0;
	 padding: 0;
	 box-sizing: border-box;
}
 body {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 background: #282828;
	 min-height: 100vh;
}
 .loader {
	 display: flex;
	 flex-direction: row;
}
 .loader div {
	 position: relative;
	 width: 40px;
	 height: 200px;
	 margin: 20px;
	 overflow: hidden;
	 border-radius: 40px;
	 background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
	 border: 2px solid #272727;
	 box-shadow: -5px -5px 5px rgba(92, 92, 92, 0.1), 10px 10px 10px rgba(0, 0, 0, 0.4), inset -5px -5px 5px rgba(82, 82, 82, 0.2), inset 10px 10px 10px rgba(0, 0, 0, 0.4);
}
 .loader div::before {
	 content: "";
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 z-index: 10;
	 border-radius: 40px;
	 box-shadow: -5px -5px 5px rgba(92, 92, 92, 0.1), 10px 10px 10px rgba(0, 0, 0, 0.4), inset -5px -5px 5px rgba(82, 82, 82, 0.2), inset 10px 10px 10px rgba(0, 0, 0, 0.4);
}
 .loader div::after {
	 content: "";
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 36px;
	 height: 36px;
	 background: #343434;
	 border-radius: 50%;
	 box-shadow: inset -5px -5px 5px rgba(0, 0, 0, 0.2), 0 420px 0 400px #ffe700;
	 animation: animate 2.5s ease-in-out infinite;
	 transform: translateY(160px);
	 animation-delay: calc(-0.5s * var(--i));
}
 @keyframes animate {
	 0% {
		 transform: translateY(160px);
		 filter: hue-rotate(180deg);
	}
	 50% {
		 transform: translateY(0px);
	}
	 100% {
		 transform: translateY(160px);
		 filter: hue-rotate(0deg);
	}
}

4. NEUMORPHIC FORM

NEUMORPHIC FORM

HTML Code

<div class="container">
   <div class="brand-logo"></div>
   <div class="brand-title">TWITTER</div>
   <div class="inputs">
      <label>EMAIL</label>
      <input type="email" placeholder="example@test.com" />
      <label>PASSWORD</label>
      <input type="password" placeholder="Min 6 charaters long" />
      <button type="submit">LOGIN</button>
   </div>
</div>

CSS Code

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

input {
  caret-color: red;
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: #ecf0f3;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  place-items: center;
  overflow: hidden;
  font-family: poppins;
}

.container {
  position: relative;
  width: 350px;
  height: 500px;
  border-radius: 20px;
  padding: 40px;
  box-sizing: border-box;
  background: #ecf0f3;
  box-shadow: 14px 14px 20px #cbced1, -14px -14px 20px white;
}

.brand-logo {
  height: 100px;
  width: 100px;
  background: url("https://img.icons8.com/color/100/000000/twitter--v2.png");
  margin: auto;
  border-radius: 50%;
  box-sizing: border-box;
  box-shadow: 7px 7px 10px #cbced1, -7px -7px 10px white;
}

.brand-title {
  margin-top: 10px;
  font-weight: 900;
  font-size: 1.8rem;
  color: #1da1f2;
  letter-spacing: 1px;
}

.inputs {
  text-align: left;
  margin-top: 30px;
}

label,
input,
button {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
}

label {
  margin-bottom: 4px;
}

label:nth-of-type(2) {
  margin-top: 12px;
}

input::placeholder {
  color: gray;
}

input {
  background: #ecf0f3;
  padding: 10px;
  padding-left: 20px;
  height: 50px;
  font-size: 14px;
  border-radius: 50px;
  box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
}

button {
  color: white;
  margin-top: 20px;
  background: #1da1f2;
  height: 40px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 900;
  box-shadow: 6px 6px 6px #cbced1, -6px -6px 6px white;
  transition: 0.5s;
}

button:hover {
  box-shadow: none;
}

a {
  position: absolute;
  font-size: 8px;
  bottom: 4px;
  right: 4px;
  text-decoration: none;
  color: black;
  background: yellow;
  border-radius: 10px;
  padding: 2px;
}

h1 {
  position: absolute;
  top: 0;
  left: 0;
}

5. Neumorphic Flip toggle

Neumorphic Flip toggle

HTML Code

<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600">
   <defs>
      <clipPath id="btnMask">
         <rect class="btnMask" x="300" y="250" width="100" height="100" fill="#D5DEEA" rx="50" stroke="#CDD9E7" stroke-width="0" />
      </clipPath>
      <filter  id="darkGlow" x="-100%" y="-100%" width="250%" height="250%">
         <feGaussianBlur stdDeviation="13" result="coloredBlur" />
         <feOffset dx="10" dy="10" result="offsetblur"></feOffset>
         <feFlood id="glowAlpha" flood-color="#829BB5" flood-opacity="0.41"></feFlood>
         <feComposite in2="offsetblur" operator="in"></feComposite>
         <feMerge>
            <feMergeNode />
            <feMergeNode in="SourceGraphic"></feMergeNode>
         </feMerge>
      </filter>
      <filter  id="darkGlow_a" x="-100%" y="-100%" width="250%" height="250%">
         <feGaussianBlur stdDeviation="13" result="coloredBlur" />
         <feOffset dx="10" dy="10" result="offsetblur"></feOffset>
         <feFlood id="glowAlpha" flood-color="#829BB5" flood-opacity="0"></feFlood>
         <feComposite in2="offsetblur" operator="in"></feComposite>
         <feMerge>
            <feMergeNode />
            <feMergeNode in="SourceGraphic"></feMergeNode>
         </feMerge>
      </filter>
      <filter  id="lightGlow" x="-100%" y="-100%" width="250%" height="250%">
         <feGaussianBlur stdDeviation="13" result="coloredBlur" />
         <feOffset dx="-10" dy="-10" result="offsetblur"></feOffset>
         <feFlood id="glowAlpha" flood-color="#FFF" flood-opacity="0.41"></feFlood>
         <feComposite in2="offsetblur" operator="in"></feComposite>
         <feMerge>
            <feMergeNode />
            <feMergeNode in="SourceGraphic"></feMergeNode>
         </feMerge>
      </filter>
      <filter  id="lightGlow_a" x="-100%" y="-100%" width="250%" height="250%">
         <feGaussianBlur stdDeviation="13" result="coloredBlur" />
         <feOffset dx="-10" dy="-10" result="offsetblur"></feOffset>
         <feFlood id="glowAlpha" flood-color="#FFF" flood-opacity="0"></feFlood>
         <feComposite in2="offsetblur" operator="in"></feComposite>
         <feMerge>
            <feMergeNode />
            <feMergeNode in="SourceGraphic"></feMergeNode>
         </feMerge>
      </filter>
      <filter  id="innerShadow1" x0="-50%" y0="-50%">
         <feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur" />
         <feOffset dx="20" dy="20" />
         <feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowDiff" />
         <feFlood flood-color="#829BB5" class="buttonFlood" flood-opacity="0" />
         <feComposite in2="shadowDiff" operator="in" />
         <feComposite in2="SourceGraphic" operator="over" />
      </filter>
      <filter  id="innerShadow1_a" x0="-50%" y0="-50%">
         <feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur" />
         <feOffset dx="20" dy="20" />
         <feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowDiff" />
         <feFlood flood-color="#829BB5" class="buttonFlood_a" flood-opacity="0.24" />
         <feComposite in2="shadowDiff" operator="in" />
         <feComposite in2="SourceGraphic" operator="over" />
      </filter>
      <filter  id="innerShadow2" x0="-50%" y0="-50%">
         <feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur" />
         <feOffset dx="-10" dy="-10" />
         <feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowDiff" />
         <feFlood flood-color="#FFF" class="buttonFlood" flood-opacity="0" />
         <feComposite in2="shadowDiff" operator="in" />
         <feComposite in2="SourceGraphic" operator="over" />
      </filter>
      <filter  id="innerShadow2_a" x0="-50%" y0="-50%">
         <feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur" />
         <feOffset dx="-10" dy="-10" />
         <feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowDiff" />
         <feFlood flood-color="#FFF" class="buttonFlood_a" flood-opacity="0.24" />
         <feComposite in2="shadowDiff" operator="in" />
         <feComposite in2="SourceGraphic" operator="over" />
      </filter>
   </defs>
   <filter  id="innerShadow3" x0="-50%" y0="-50%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur" />
      <feOffset dx="0" dy="2" />
      <feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowDiff" />
      <feFlood flood-color="#111" class="buttonFloodxxx" flood-opacity="0.15" />
      <feComposite in2="shadowDiff" operator="in" />
      <feComposite in2="SourceGraphic" operator="over" />
   </filter>
   </defs>
   <g filter="url(#lightGlow)" >
      <g filter="url(#darkGlow)">
         <g filter="url(#innerShadow2)">
            <g class="on" filter="url(#innerShadow1)" clip-path="url(#btnMask)">
               <rect class="btn1" x="300" y="250" width="100" height="100" fill="#D5DEEA" rx="50" stroke="#CDD9E7" stroke-width="0" />
            </g>
         </g>
      </g>
   </g>
   <g filter="url(#lightGlow_a)" >
      <g filter="url(#darkGlow_a)">
         <g filter="url(#innerShadow2_a)">
            <g class="off" filter="url(#innerShadow1_a)" transform="translate(120)"  clip-path="url(#btnMask)">
               <rect class="btn2" x="300" y="250" width="100" height="100" fill="#D5DEEA" rx="50" stroke="#CDD9E7" stroke-width="0" />
               <circle class="dot" cx="350" cy="300"  fill="#D5FFEA" r="10"/>
            </g>
         </g>
      </g>
   </g>
   <g filter="url(#innerShadow3)">
      <rect class="bg" x="280" y="230" width="260" height="140" fill="transparent" rx="70" stroke="#CDD9E7" stroke-width="14" />
   </g>
</svg>

CSS Code

body {
  background-color: #d5deea;
  overflow: hidden;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

svg {
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.bg {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

/* .off {
	filter: url('#lightGlow_a');
	filter: url('#darkGlow_a');
	filter: url('#innerShadow2_a');
	filter: url('#innerShadow1_a');
} */

Js Code

let select = s => document.querySelector(s);
let dot = select('.dot');
let on = select('.on');
let off = select('.off');
let duration = 0.18;
gsap.set('svg', {
	visibility: 'visible'
})

let tl = gsap.timeline({
	paused: true,
	defaults: {
		duration: duration,
		ease: 'sine.inOut'
	}
});
tl.to('.buttonFlood', {
		floodOpacity: 0.24
	}, 0)
	.to('.buttonFlood_a', {
		floodOpacity: 0
	}, 0)
	.to('#lightGlow feFlood', {
		floodOpacity: 0
	}, 0)
	.to('#darkGlow feFlood', {
		floodOpacity: 0.2
	}, 0)
	.to('#lightGlow_a feFlood', {
		floodOpacity: 0.41
	}, 0)
	.to('#darkGlow_a feFlood', {
		floodOpacity: 0.41
	}, 0)

select('.bg').onclick = e => {
	const state = Flip.getState(dot);
	(dot.parentNode == on ? off : on).appendChild(dot);
	Flip.from(state, {
		duration: duration * 2,
		ease: 'elastic(0.7, 0.8)'
	})
	if (tl.time() > 0) {
		tl.reverse()
	} else {
		tl.play(0)
	}
}