クレイモーフィズムとは

パステルカラーの背景に大きな角丸と厚みのある内側の影を組み合わせ、粘土でできたような質感に見せる CSS 装飾のスタイル。

概要

明るいパステルカラーの背景に、大きめの角丸と厚みのある内側の影（inset の box-shadow）を重ねることで、粘土（clay）をこねて作ったような丸くぷっくりした質感に見せる装飾のスタイルです。アイコンやカードを立体的に見せたいときに使われます。

別名

表記ゆれ：クレイモーフィズム、claymorphism、粘土風

AI への伝え方

「クレイモーフィズムにして」「粘土っぽい丸みのあるカードにして」で伝わります。角丸の大きさと影の濃さで印象が大きく変わるため、「もっと丸く」「もっと立体的に」など具体的な度合いを伝えると仕上がりがぶれません。

似たパーツとの違い

「ニューモーフィズム」も影で立体感を作る技法ですが、背景と要素をほぼ同色にしてグレー系の淡い影で仕上げるのに対し、クレイモーフィズムはパステルカラーと濃いめの影・大きな角丸を使って、より厚みとカラフルさのある印象に仕上げる点が違います。

デモ

粘土のようなカード

コード

HTML

<div class="clay-demo">
  <div class="clay-demo__card">
    <div class="clay-demo__icon" aria-hidden="true"></div>
    <p>粘土のようなカード</p>
  </div>
</div>

CSS

.clay-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: #eef1fb;
  border-radius: 12px;
  font-family: sans-serif;
}

.clay-demo__card {
  width: 220px;
  padding: 28px;
  border-radius: 32px;
  background: #d9c9fb;
  text-align: center;
  color: #333333;
  /* 厚みのある内側の影(明・暗を重ねる)でぷっくりした質感にする */
  box-shadow: inset -10px -10px 20px rgba(255, 255, 255, 0.6), inset 10px 10px 24px rgba(120, 90, 170, 0.35),
    0 12px 24px rgba(120, 90, 170, 0.25);
}

.clay-demo__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #ffd9ec;
  box-shadow: inset -6px -6px 12px rgba(255, 255, 255, 0.7), inset 6px 6px 14px rgba(200, 120, 170, 0.4);
}

.clay-demo__card p {
  margin: 0;
  font-size: 15px;
}