思わず撫でたくなる質感の「ニューモーフィズム」 CSSを使って実装する方法

著者：

松岡宗谷

投稿日：2023年12月01日

更新日：2023年12月01日

今回は風変わりな記事を。今回は実際にどのようにニューモーフィズムを実装するのかを紹介していきます。通常の記事は白背景ですが、実装方法を載せて参りますので背景の色を変えております。

ニューモーフィズムのCSSを生成できる！「Neumorphism.io」
フロントエンジニア御用達「uiverse」
ニューモーフィズム CSS/HTML 実装ボタン
1. githubボタン
2. LIKEボタン
3. クリックボタン
4. 削除ボタン
ニューモーフィズム CSS/HTML 実装チェックボックス
1. チェックボックス1
2. チェックボックス2
ニューモーフィズム CSS/HTML 実装トグルスイッチ
1. トグルスウィッチ1
2. トグルスウィッチ2
ニューモーフィズム CSS/HTML 実装カード
1. カード
2. メニューカード
3. サインインカード
ニューモーフィズム CSS/HTML 実装インプット
1. ふわりとしたインプット
2. デボス加工されたようなインプット
3. 浮かび上がるインプット
まとめ

ニューモーフィズムのCSSを生成できる！「Neumorphism.io」

Neumorphism.io Generate Soft-UI CSS code

ニューモーフィズムをCSSだけで実装する方法を紹介する前にまずはこのサービスを紹介いたします。ニューモーフィズムのCSSを生成ができるサービスです。実装が何かと面倒な方はこちらで生成するのもアリです。

フロントエンジニア御用達「uiverse」

Explore 3000+ Free UI Elements: CSS & Tailwind

次に紹介しますのでフロントエンジニア御用達のHTMLとCSSだけで実装できる様々な実装方法が集まるサービスです。もはやCSSに悩んだらこのサービスを見に行けば良いのでは・・・。

ニューモーフィズム CSS/HTML 実装ボタン

では、ここからuiverseを参考にした「ニューモーフィズム」を実装する方法を紹介していきます。

githubボタン

HTML

<button class="btn">
  <svg width="40" height="40" fill="#0092E4" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24" id="github">
    <path d="M12,2.2467A10.00042,10.00042,0,0,0,8.83752,21.73419c.5.08752.6875-.21247.6875-.475,0-.23749-.01251-1.025-.01251-1.86249C7,19.85919,6.35,18.78423,6.15,18.22173A3.636,3.636,0,0,0,5.125,16.8092c-.35-.1875-.85-.65-.01251-.66248A2.00117,2.00117,0,0,1,6.65,17.17169a2.13742,2.13742,0,0,0,2.91248.825A2.10376,2.10376,0,0,1,10.2,16.65923c-2.225-.25-4.55-1.11254-4.55-4.9375a3.89187,3.89187,0,0,1,1.025-2.6875,3.59373,3.59373,0,0,1,.1-2.65s.83747-.26251,2.75,1.025a9.42747,9.42747,0,0,1,5,0c1.91248-1.3,2.75-1.025,2.75-1.025a3.59323,3.59323,0,0,1,.1,2.65,3.869,3.869,0,0,1,1.025,2.6875c0,3.83747-2.33752,4.6875-4.5625,4.9375a2.36814,2.36814,0,0,1,.675,1.85c0,1.33752-.01251,2.41248-.01251,2.75,0,.26251.1875.575.6875.475A10.0053,10.0053,0,0,0,12,2.2467Z"></path>
  </svg>
</button>

CSS

.btn {
  display: grid;
  place-items: center;
  background: #e3edf7;
  padding: 1.4em;
  border-radius: 10px;
  box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
	      -6px -6px 10px -1px rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0);
  cursor: pointer;
  transition: transform 0.5s;
}

.btn:hover {
  box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
	      inset -4px -4px 6px -1px rgba(255,255,255,0.7),
	      -0.5px -0.5px 0px rgba(255,255,255,1),
	      0.5px 0.5px 0px rgba(0,0,0,0.15),
	      0px 12px 10px -10px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.1);
  transform: translateY(0.5em);
}

.btn svg {
  transition: transform 0.5s;
}

.btn:hover svg {
  transform: scale(0.9);
  fill: #333333;
}

LIKEボタン

HTML

<button class="heartlike">
  <svg class="empty" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32">
    <path fill="none" d="M0 0H24V24H0z"></path>
    <path d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604c.881-.556 1.676-1.109 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5 5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903.745.592 1.54 1.145 2.421 1.7.299.189.595.37.934.572.339-.202.635-.383.934-.571z"></path>
  </svg>
  <svg class="filled" height="32" width="32" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0H24V24H0z" fill="none"></path>
    <path d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2z"></path>
  </svg>Like 
</button>

CSS

.heartlike {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 25px 20px 22px;
  box-shadow: rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  background-color: #e8e8e8;
  border-color: #ffe2e2;
  border-style: solid;
  border-width: 9px;
  border-radius: 35px;
  font-size: 25px;
  font-weight: 900;
  color: rgb(134, 124, 124);
  font-family: monospace;
  transition: transform 400ms cubic-bezier(.68,-0.55,.27,2.5), 
  border-color 400ms ease-in-out,
  background-color 400ms ease-in-out;
  word-spacing: -2px;
}

@keyframes movingBorders {
  0% {
    border-color: #fce4e4;
  }

  50% {
    border-color: #ffd8d8;
  }

  90% {
    border-color: #fce4e4;
  }
}

.heartlike:hover {
  background-color: #eee;
  transform: scale(105%);
  animation: movingBorders 3s infinite;
}

.heartlike svg {
  margin-right: 11px;
  fill: rgb(255, 110, 110);
  transition: opacity 100ms ease-in-out;
}

.filled {
  position: absolute;
  opacity: 0;
  top: 20px;
  left: 22px;
}

@keyframes beatingHeart {
  0% {
    transform: scale(1);
  }

  15% {
    transform: scale(1.15);
  }

  30% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.15);
  }

  60% {
    transform: scale(1);
  }
}

.heartlike:hover .empty {
  opacity: 0;
}

.heartlike:hover .filled {
  opacity: 1;
  animation: beatingHeart 1.2s infinite;
}

クリックボタン

HTML

<button class="clickme">Click me</button>

CSS

.clickme {
 color: #090909;
  cursor: pointer;
 padding: 0.7em 1.7em;
 font-size: 18px;
 border-radius: 0.5em;
 background: #e8e8e8;
 border: 1px solid #e8e8e8;
 transition: all .3s;
 box-shadow: 6px 6px 12px #c5c5c5,
             -6px -6px 12px #ffffff;
}

.clickme:active {
 color: #666;
 box-shadow: inset 4px 4px 12px #c5c5c5,
             inset -4px -4px 12px #ffffff;
}

削除ボタン

Delete

HTML

<div class="del">
    <div>
      Delete
    </div>     
</div>

CSS

.del {
  cursor: pointer;
  position: relative;
  top: 0;
  left: 0;
  width: 160px;
  height: 50px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.del div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .5), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  letter-spacing: 1px;
  color: #ff0000;
  z-index: 1;
  transition: .6s;
}

.del:hover div {
  letter-spacing: 4px;
  color: #fff;
  background: #ff0000;
}

ニューモーフィズム CSS/HTML 実装チェックボックス

チェックボックス1

HTML

<label class="container">
  <input type="checkbox" checked="checked">
  <div class="checkmark"></div>
</label>

CSS

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
}

.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  background-color: #ccc;
  border-radius: 100%;
  background: #e8e8e8;
  box-shadow: 3px 3px 5px #c5c5c5,
              -3px -3px 5px #ffffff;
  transition-duration: 0.5s;
}

.container input:checked ~ .checkmark {
  box-shadow: inset 3px 3px 5px #c5c5c5,
              inset -3px -3px 5px #ffffff;
}

.checkmark:after {
  content: "";
  position: absolute;
  opacity: 0;
}

.container input:checked ~ .checkmark:after {
  opacity: 1;
}

.container .checkmark:after {
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border: solid darkgray;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

チェックボックス2

HTML

<label class="container2">
  <input checked="checked" type="checkbox">
  <div class="checkmark2"></div>
</label>

CSS

.container2 input {
  position: absolute;
  opacity: 1;
  -webkit-appearance: none;
  cursor: pointer;
  height: 50px;
  width: 50px;
  box-shadow: -10px -10px 15px rgba(255,255,255,0.5),
  10px 10px 15px rgba(0,0,70,0.12);
  border-radius: 50%;
  border: 8px solid #ececec;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .5s;
}

.container2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container2 input::after {
  transition: .5s;
  font-family: monospace;
  content: '';
  color: #7a7a7a;
  font-size: 25px;
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border: solid #7a7a7a;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}
.container2 input:checked {
  box-shadow: -10px -10px 15px rgba(255,255,255,0.5),
  10px 10px 15px rgba(70,70,70,0.12),
  inset -10px -10px 15px rgba(255,255,255,0.5),
  inset 10px 10px 15px rgba(70,70,70,0.12);
  transition: .5s;
}
.container2 input:checked::after {
  transition: .5s;
  content: '';
  border: solid #15e38a;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

ニューモーフィズム CSS/HTML 実装トグルスイッチ

トグルスウィッチ1

HTML

<div class="container3">
  <label class="switch">
    <input class="togglesw" type="checkbox" checked="">
    <div class="indicator3 left"></div>
    <div class="indicator3 right"></div>
    <div class="button3"></div>
  </label>
</div>

CSS

.container3 {
  display: flex;
  align-items: center;
  justify-content: center;
  --hue: 220deg;
  --width: 15rem;
  --accent-hue: 22deg;
  --duration: 0.6s;
  --easing: cubic-bezier(1, 0, 1, 1);
}

.togglesw {
  display: none;
}

.switch {
  --shadow-offset: calc(var(--width) / 20);
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: var(--width);
  height: calc(var(--width) / 2.5);
  border-radius: var(--width);
  box-shadow: inset 10px 10px 10px hsl(var(--hue) 20% 80%),
    inset -10px -10px 10px hsl(var(--hue) 20% 93%);
}

.indicator3 {
  content: '';
  position: absolute;
  width: 40%;
  height: 60%;
  transition: all var(--duration) var(--easing);
  box-shadow: inset 0 0 2px hsl(var(--hue) 20% 15% / 60%),
    inset 0 0 3px 2px hsl(var(--hue) 20% 15% / 60%),
    inset 0 0 5px 2px hsl(var(--hue) 20% 45% / 60%);
}

.indicator3.left {
  --hue: var(--accent-hue);
  overflow: hidden;
  left: 10%;
  border-radius: 100px 0 0 100px;
  background: linear-gradient(180deg, hsl(calc(var(--accent-hue) + 20deg) 95% 80%) 10%, hsl(calc(var(--accent-hue) + 20deg) 100% 60%) 30%, hsl(var(--accent-hue) 90% 50%) 60%, hsl(var(--accent-hue) 90% 60%) 75%, hsl(var(--accent-hue) 90% 50%));
}

.indicator3.left::after {
  content: '';
  position: absolute;
  opacity: 0.6;
  width: 100%;
  height: 100%;
}

.indicator3.right {
  right: 10%;
  border-radius: 0 100px 100px 0;
  background-image: linear-gradient(180deg, hsl(var(--hue) 20% 95%), hsl(var(--hue) 20% 65%) 60%, hsl(var(--hue) 20% 70%) 70%, hsl(var(--hue) 20% 65%));
}

.button3 {
  position: absolute;
  z-index: 1;
  width: 55%;
  height: 80%;
  left: 5%;
  border-radius: 100px;
  background-image: linear-gradient(160deg, hsl(var(--hue) 20% 95%) 40%, hsl(var(--hue) 20% 65%) 70%);
  transition: all var(--duration) var(--easing);
  box-shadow: 2px 2px 3px hsl(var(--hue) 18% 50% / 80%),
    2px 2px 6px hsl(var(--hue) 18% 50% / 40%),
    10px 20px 10px hsl(var(--hue) 18% 50% / 40%),
    20px 30px 30px hsl(var(--hue) 18% 50% / 60%);
}
.button3::before, 
.button3::after {
  content: '';
  position: absolute;
  top: 10%;
  width: 41%;
  height: 80%;
  border-radius: 100%;
}

.button3::before {
  left: 5%;
  box-shadow: inset 1px 1px 2px hsl(var(--hue) 20% 85%);
  background-image: linear-gradient(-50deg, hsl(var(--hue) 20% 95%) 20%, hsl(var(--hue) 20% 85%) 80%);
}

.button3::after {
  right: 5%;
  box-shadow: inset 1px 1px 3px hsl(var(--hue) 20% 70%);
  background-image: linear-gradient(-50deg, hsl(var(--hue) 20% 95%) 20%, hsl(var(--hue) 20% 75%) 80%);
}

.togglesw:checked ~ .button3 {
  left: 40%;
}

.togglesw:not(:checked) ~ .indicator3.left,
.togglesw:checked ~ .indicator3.right {
  box-shadow: inset 0 0 5px hsl(var(--hue) 20% 15% / 100%),
    inset 20px 20px 10px hsl(var(--hue) 20% 15% / 100%),
    inset 20px 20px 15px hsl(var(--hue) 20% 45% / 100%);
}

トグルスウィッチ2

HTML

<label class="label4">
  <div class="toggle4">
    <input class="toggle-state4" type="checkbox" name="check" value="check">
    <div class="indicator4"></div>
  </div>
</label>

CSS

.label4 {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: #394a56;
}

.label-text4 {
  margin-left: 16px;
}

.toggle4 {
  isolation: isolate;
  position: relative;
  height: 30px;
  width: 60px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: -8px -4px 8px 0px #ffffff,
    8px 4px 12px 0px #d1d9e6,
    4px 4px 4px 0px #d1d9e6 inset,
    -4px -4px 4px 0px #ffffff inset;
}
.toggle-state4 {
  display: none;
}
.indicator4 {
  height: 100%;
  width: 200%;
  background: #ecf0f3;
  border-radius: 15px;
  transform: translate3d(-75%, 0, 0);
  transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
  box-shadow: -8px -4px 8px 0px #ffffff,
    8px 4px 12px 0px #d1d9e6;
}
.toggle-state4:checked ~ .indicator4 {
  transform: translate3d(25%, 0, 0);
  background-color: #00d067;
}

ニューモーフィズム CSS/HTML 実装カード

カード

HTML

<div class="card1"></div>

CSS

.card1 {
  width: 190px;
  height: 254px;
  border-radius: 30px;
  background: #e0e0e0;
  box-shadow: 15px 15px 30px #bebebe,
             -15px -15px 30px #ffffff;
}

メニューカード

HTML

<div class="card">
  <button class="button Explore">
    <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" class="svg">
      <g id="Layer_2" data-name="Layer 2">
        <g id="invisible_box" data-name="invisible box">
          <rect width="48" height="48" fill="none"></rect>
        </g>
        <g id="icons_Q2" data-name="icons Q2">
          <path d="M24,2A22,22,0,1,0,46,24,21.9,21.9,0,0,0,24,2ZM34.7,14.7,28,28,14.7,34.7a1.1,1.1,0,0,1-1.4-1.4L20,20l13.3-6.7A1.1,1.1,0,0,1,34.7,14.7ZM24,22a2,2,0,1,0,2,2A2,2,0,0,0,24,22Z"></path>
          <path d="M24,22a2,2,0,1,0,2,2A2,2,0,0,0,24,22Zm0,0a2,2,0,1,0,2,2A2,2,0,0,0,24,22Z"></path>
        </g>
      </g>
    </svg>Explore
  </button>
  <button class="button Post">
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="svg">
      <path clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM12 7C12.5523 7 13 7.44772 13 8V11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V13H8C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H11V8C11 7.44772 11.4477 7 12 7Z"></path>
    </svg>Post
  </button>
  <button class="button Chat">
    <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg">
      <g id="Dribbble-Light-Preview" transform="translate(-140.000000, -999.000000)">
        <g id="icons" transform="translate(56.000000, 160.000000)">
          <path d="M97.1784026,840.884344 C92.8882915,837.134592 86.2359857,839.256228 84.7592414,844.817545 C84.139128,847.151543 84.7373784,848.235292 84.7373784,849.987037 C84.7373784,851.787636 84,854.395812 84,854.395812 C84,854.714855 84.2832249,855.025921 84.6320386,854.935194 C85.8792217,854.609172 87.8627895,853.964107 90.2349218,854.608175 C98.2119249,856.770688 103.330841,846.261214 97.1784026,840.884344 M103.447113,859 C103.395437,859 103.341773,858.993021 103.287115,858.979063 C96.9806421,857.395812 97.4039887,859.174477 93.8999507,858.237288 C92.8395967,857.954137 91.8746446,857.443669 91.0418642,856.781655 C97.4059763,857.561316 102.710728,852.016948 101.771614,845.487535 C102.732591,846.487535 103.438169,847.72582 103.7363,849.11266 C104.584981,853.048852 102.430484,852.38285 103.983749,858.364905 C104.075176,858.714855 103.765119,859 103.447113,859" id="messages_chat-[#1557]"></path>
        </g>
      </g>
    </svg>Chat
  </button>
</div>

CSS

.card {
  background-color: #e4e4e4;
  border-radius: 15px;
  box-shadow: 10px 10px 20px #c4c4c4,
              -10px -10px 20px #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 4px;
}

.button {
  background-color: #e4e4e4;
  border: none;
  border-radius: 10px;
  box-shadow: inset 5px 5px 5px #c4c4c4,
              inset -5px -5px 5px #ffffff;
  color: #333;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 13px;
  font-weight: bold;
  margin: 3px;
  padding: 10px;
  text-transform: uppercase;
}

.button:hover {
  box-shadow: none;
}

.svg {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.card .Explore {
  color: #3035cb;
}

.card .Explore:hover {
  background-color: #3035cb;
  color: #e4e4e4;
}

.card .Explore svg {
  fill: #3035cb;
}

.card .Explore:hover svg {
  fill: #e4e4e4;
}

.card .Post {
  color: #333;
}

.card .Post:hover {
  background-color: #333;
  color: #e4e4e4;
}

.card .Post svg {
  fill: #333;
}

.card .Post:hover svg {
  fill: #e4e4e4;
}

.card .Chat {
  color: #b82323;
}

.card .Chat:hover {
  background-color: #b82323;
  color: #e4e4e4;
}

.card .Chat svg {
  fill: #b82323;
}

.card .Chat:hover svg {
  fill: #e4e4e4;
}

サインインカード

Welcome Back

We are you to have you Again

Username

Password

Remember Me

Forget Password

Don t Have an Account ? Sign Up

HTML

<div class="card-container3">
  <div class="circle1"></div>
  <div class="circle2"></div>
  <div class="container3">
    <div class="log-card3">
      <p class="heading3">Welcome Back</p>
      <p>We are you to have you Again</p>
      <div class="input-group3">
        <p class="text3">Username</p>
        <input class="input3" type="username" placeholder="For Ex: Jayakrishna007">
        <p class="text3">Password</p>
        <input class="input3" type="password" placeholder="Enter Password">
      </div>
      <div class="password-group3">
        <div class="checkbox-group3">
          <input type="checkbox">
          <label class="label3">Remember Me</label>
        </div>
        <a href="" class="forget-password3">Forget Password</a>
      </div>
      <button class="btn33">Sign In</button>
      <p class="no-account3">Don t Have an Account ?
        <a class="link3">Sign Up</a>
      </p>
    </div>
  </div>
</div>

CSS

.card-container3 {
  width: 350px;
  height: 440px;
  background: transparent;
  position: relative;
}

.container3 {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.circle1 {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background-color: #2879f3;
  position: absolute;
  top: 0;
  left: 0;
}

.circle2 {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background-color: #f37e10;
  position: absolute;
  right: 0;
  bottom: 0;
}

.log-card3 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  position: absolute;
  width: 300px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  padding: 20px;
}

.heading3 {
  font-size: 28px;
  font-weight: 800;
}

.para3 {
  font-size: 14px;
  font-weight: 500;
}

.text3 {
  margin-top: 15px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 600;
  color: lightslategray;
}

.input-group3 {
  margin-top: 10px;
  margin-bottom: 4px;
}

.input3 {
  box-sizing: border-box;
  margin-bottom: 5px;
  width: 100%;
  border: none;
  padding: 8px 16px;
  background-color: transparent;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  font-weight: 600;
  color: #2879f3;
}

.input3:hover {
  color: #2879f3;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.password-group3 {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}

.checkbox-group3 {
  color: black;
  font-size: 14px;
  font-weight: 500;
}

.forget-password3 {
  font-size: 14px;
  font-weight: 500;
  color: #2879f3;
  text-decoration: none;
}

.forget-password3:hover {
  text-decoration: underline;
  color: #f37e10;
}

.btn33 {
  margin-top: 20px;
  margin-bottom: 10px;
  padding: 8px 16px;
  border: none;
  background-color: #2879f3;
  color: white;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
}

.btn33:hover {
  background-color: #0653c7;
}

.no-account3 {
  font-size: 16px;
  font-weight: 400;
}

.link3 {
  font-weight: 800;
  color: #2879f3;
}

.link3:hover {
  color: #f37e10;
  text-decoration: underline;
}

ニューモーフィズム CSS/HTML 実装インプット

ふわりとしたインプット

HTML

<input type="text" name="text" class="input1" placeholder="Type here...">

CSS

.input1 {
 border: none;
 padding: 1rem;
 border-radius: 1rem;
 background: #e8e8e8;
 box-shadow: 20px 20px 60px #c5c5c5,
	-20px -20px 60px #ffffff;
 transition: 0.3s;
}
.input1:focus {
 outline-color: #e8e8e8;
 background: #e8e8e8;
 box-shadow: inset 20px 20px 60px #c5c5c5,
	inset -20px -20px 60px #ffffff;
 transition: 0.3s;
}

デボス加工されたようなインプット

HTML

<input type="text" name="text" class="input2" placeholder="Type here!">

CSS

.input2 {
 border: none;
 border-radius: 15px;
 padding: 15px;
 background-color: #e8e8e8;
 box-shadow: 6px 6px 12px #ffffff,
             -6px -6px 12px #c5c5c5;
 font-size: medium;
 font-weight: bold;
 max-width: 200px;
}
.input2:focus {
 outline-color: white;
 place-content: "Enter your message!";
}

浮かび上がるインプット

HTML

<input placeholder="Username" type="text" name="text" class="input3">

CSS

.input3 {
  max-width: 190px;
  border: none;
  outline: none;
  background: none;
  font-size: 18px;
  color: #555;
  padding: 15px 5px 10px 20px;
  box-shadow: inset 8px 8px 8px #cbced1,
              inset -8px -8px 8px #ffffff;
  border-radius: 25px;
}

.input3::placeholder {
  color: #555;
  transition: all 0.3s ease;
}
.input3:focus::placeholder {
  color: #999;
}

まとめ

様々な「ニューモーフィズム」をCSSのみで表現してみました。実はかなり大変だったのですが、久しぶりにこうゆう記事を作成していく過程が面白くてよかったです。実装を載せる過程でもBasic自体のバグがかなり発見されてそのバグを修正しつつなので時間がかかりましたが良い収穫でした。裏話は置いといて、「ニューモーフィズム」いかがでしたでしょうか。実際問題使える時は少ないとは思いますが、引き出しの多さがあることには越したことはありません。

それではー。

CSS

デザイン

CMSの悩みはBasicで一気に解決しましょう

完全無料
Basicはオープンソースで運営されています。誰しもが自由にBasicを利用できます。
超軽量化で超高速配信
通常のCMSよりページ容量を70%以上を自動で圧縮を行い更に自動で静的化・圧縮化されたページが配信されます。
SEOにつよつよ
70%以上軽量化に加えて最新SEOに対応した構造で静的化・圧縮化されたページはライバルサイトより圧倒的に評価されます

ライバルサイトより一歩前にいけるCMSでサイトを構築しませんか？

著者プロフィール

Basic https://basic.dance/ を運営しています。スペースナビ代表取締役。スタートアップ界隈でCTO→Sharetube創業→スペースナビ創業→UXSEOリリース、ResizeCDNリリース、あまてむリリース。世界で最もSEOに効くCMS Basicリリース。個人の夢は完全義体化。会社の夢は宇宙事業。プログラマーは死ぬまで現役でありたい

前の記事【2023年版】デザイナー必見、フリーアイコン・イラストサイト20選まとめ

次の記事人気サービスの初期ロゴと現在のロゴを比較してみた

思わず撫でたくなる質感の「ニューモーフィズム」 CSSを使って実装する方法

ニューモーフィズムのCSSを生成できる！「Neumorphism.io」

フロントエンジニア御用達「uiverse」

ニューモーフィズム CSS/HTML 実装 ボタン

githubボタン

HTML

CSS

LIKEボタン

HTML

CSS

クリックボタン

HTML

CSS

削除ボタン

HTML

CSS

ニューモーフィズム CSS/HTML 実装 チェックボックス

チェックボックス1

HTML

CSS

チェックボックス2

HTML

CSS

ニューモーフィズム CSS/HTML 実装 トグルスイッチ

トグルスウィッチ1

HTML

CSS

トグルスウィッチ2

HTML

CSS

ニューモーフィズム CSS/HTML 実装 カード

カード

HTML

CSS

メニューカード

HTML

CSS

サインインカード

HTML

CSS

ニューモーフィズム CSS/HTML 実装 インプット

ふわりとしたインプット

HTML

CSS

デボス加工されたようなインプット

HTML

CSS

浮かび上がるインプット

HTML

CSS

まとめ

CSSのみでスクロールした際に進捗率のプログレスバーを実装する方法

【絶版】ブラウザ毎に記述するCSSハックまとめ

ニューモーフィズム CSS/HTML 実装ボタン

ニューモーフィズム CSS/HTML 実装チェックボックス

ニューモーフィズム CSS/HTML 実装トグルスイッチ

ニューモーフィズム CSS/HTML 実装カード

ニューモーフィズム CSS/HTML 実装インプット