浮かび上がる質感（ニューモーフィズム）CSSジェネレーター
背景と要素の色を統一し、2方向の影（ハイライトとシャドウ）によってソフトな3D感を演出するニューモーフィズムのデザインを生成します。
プレビュー
<div class="neumorphism-card">
<span class="card-text">Neumorphism</span>
</div>.neumorphism-card {
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
border-radius: {{radius}}px;
background: {{bg_style}};
box-shadow: {{shadow_type}}{{distance}}px {{distance}}px {{blur}}px #bebebe,
{{shadow_type}}{{shadow_offset_minus}}{{distance}}px -{{distance}}px {{blur}}px #ffffff;
}
.card-text {
font-weight: bold;
color: #666;
}機能、使い方
- ソフトな3D演出: 背景と同系色の影を2方向に配置することで、画面から浮かび上がったり、沈み込んだりしているような質感を表現します。
- ベースカラーの選択: ニューモーフィズムは背景と要素の色を同じにすることが基本です。
- 形状の切り替え: フラットな浮き上がりだけでなく、内側に凹んだような質感（内影）も作成可能です。
CSSプロパティの説明
box-shadowの複数指定
明るい影（ハイライト）と暗い影（シャドウ）を対角線上に配置することが「ニューモーフィズム」の核となる手法です。
線形グラデーション（凹凸の表現）
linear-gradientを使用して表面にわずかな傾斜（色の変化）をつけることで、よりリアルな凸凹感を演出できます。
