粘土のようなぷっくり感（クレイモーフィズム）CSSジェネレーター
box-shadow プロパティの inset 指定を活用し、粘土やプラスチックのような立体感のある質感をCSSのみで生成します。
プレビュー
<div class="clay-card">
<span>Claymorphism</span>
</div>.clay-card {
width: 250px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
background: {{bg_color}};
border-radius: {{radius}}px;
box-shadow:
inset {{depth}}px {{depth}}px {{depth}}px rgba(255, 255, 255, {{highlight_opacity}}),
inset -{{depth}}px -{{depth}}px {{depth}}px rgba(0, 0, 0, {{inset_opacity}}),
{{depth}}px {{depth}}px {{shadow_blur}}px rgba(0, 0, 0, 0.15);
color: #fff;
font-weight: bold;
font-size: 20px;
}
.clay-card span {
display: block;
}機能、使い方
- ぷっくりとした質感の生成: 内側へのハイライト設定とシャドウ設定を組み合わせることで、粘土やプラスチックのような質感を生成します。
- 柔軟な調整: 影の深さや背景色を変えるだけで、様々な表情のカードやボタンが作成可能です。
- モダンなアクセント: アプリ風のUIや、親しみやすいデザインを作りたい時に効果的です。
CSSプロパティの説明
inset 指定の box-shadow
box-shadowにinsetキーワードを付けると、影が要素の内側に描画されます。左上からの白いハイライトと、右下からの暗いシャドウを同時に指定することで、立体的な盛り上がり（クレイモーフィズム）を表現しています。
外側の影
最後に外側のドロップシャドウを加えることで、背景から浮き上がっているような自然な奥行きを持たせています。
