#tl;dr;
2020年初頭から注目されているデザイン、Neumorphismをご存知ですか？
広く普及しているマテリアルデザインと比較して紹介します。
マテリアルデザインは、影を用いて要素を浮かび上がらせます。
一方、Neumorphism(ニューモーフィズム)では、影と光を用いて要素の凹凸を表現します。

**Neumorphism(ニューモーフィズム)**の基本的なパーツはCSS3のbox-shadowを用いて簡単に実装できます。
この記事ではCSSとHTMLを用いて簡単なパーツの作成方法を紹介します。

図1 : Neumorphismを用いたアプリケーション例 (neutodo.com)

#膨らみの表現
**Neumorphism(ニューモーフィズム)**の膨らみの表現について解説します。
次の3ステップで基本的な要素が実現できます。

border-radiusを指定して要素の四隅に丸みをつける。
box-shadowを用いて、要素の左上（光を当てる場所）に背景色よりも明るい色をつける。
box-shadowを用いて、要素の右下（影を落とす場所）に背景色よりも暗い色をつける。

box-shadowで指定する値を調整することで、凹凸の高さやなだらかさを調節できます。
box-shadowの詳しい説明は以下のようなドキュメントに譲ります。

box-shadowについて: https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow

以下に簡単なHTMLとCSSを示します。

index.html

<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
  <div>button</div>
</body>

neumorphism.css

body {
  background-color: #dddddd;
}

div {
  margin: 50px;
  padding: 10px;
  width: 50px;
  border-radius: 5px;
  box-shadow: 5px 5px 10px #bbbbbb, -5px -5px 10px #ffffff;
}

Chrome83での表示結果

#凹みの表現
**Neumorphism(ニューモーフィズム)**の凹みの表現について解説します。
次の3ステップで基本的な要素が実現できます。

border-radiusを指定して要素の四隅に丸みをつける。
box-shadow insetを用いて、要素の右下内側（光を当てる場所）に背景色よりも明るい色をつける。
box-shadow insetを用いて、要素の左上内側（影を落とす場所）に背景色よりも暗い色をつける。

以下に簡単なHTMLとCSSを示します。

index.html

<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
  <div>button</div>
</body>

neumorphism.css

body {
  background-color: #dddddd;
}

div {
  margin: 50px;
  padding: 10px;
  width: 50px;
  border-radius: 5px;
  box-shadow: inset 3px 3px 5px #bbbbbb, inset -3px -3px 5px #ffffff;
}

Chrome83での表示結果

#組み合わせて応用
上述の凹凸の表現それぞれを組み合わせることで、応用した表現も可能です。
以下に例を示します。

index.html

<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
  <div>button</div>
</body>

neumorphism.css

body {
  background-color: #dddddd;
}

div {
  margin: 50px;
  padding: 10px;
  width: 50px;
  border-radius: 15px;
  border: 5px solid #dddddd;
  box-shadow: 5px 5px 10px #bbbbbb, -5px -5px 10px #ffffff,
    inset 3px 3px 5px #bbbbbb, inset -3px -3px 5px #ffffff;
}

Chrome83での表示結果

#まとめ
Neumorphismのスタイルを生成するツール等もありますが、今回はCSSで作成しました。
注目を浴びているNeumorphismについて、webではHTMLとCSSで簡単に実現できます。

できる限り多くの方の参考になればと思い、シンプルで簡単に記述しました。