CSS ニューモルフィズムジェネレーター

ソフトUI(ニューモルフィック)CSS を生成 — 背景色とオフセットされたボックスシャドウのペア(1つは明るく、1つは暗く)、raised(flat/convex)またはpressed(concave)スタイルで — ベースカラー、距離、ぼかし、ボーダーラジウスから生成します。

入力

背景色

要素とその周辺の基本色。

スタイル

距離 (px)

明るいシャドウと暗いシャドウが要素から広がる距離。

ぼかし (px)

ボーダーラジウス (px)

出力

CSS

役に立ちましたか？

このツールを使う他の方法

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-neumorphism-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "baseColor": "#e0e5ec",
    "style": "flat",
    "distance": "20",
    "blur": "60",
    "borderRadius": "50"
  }'

ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。

AIエージェントに依頼する

Use the IOTools `css-neumorphism-generator` tool (CSS Neumorphism Generator) on this input:

YOUR_INPUT_HERE

IOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。

埋め込みウィジェット

<iframe
  src="https://iotools.cloud/embed/css-neumorphism-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="CSS ニューモルフィズム ジェネレーター — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。

API/MCP 1回あたりの費用	5クレジットから
クレジットが足りませんか?	料金を見る

次の方法でも利用可能

統合ブラウザ拡張機能 VS Code拡張機能

ガイド

何をするか

CSS ニューモルフィズムジェネレーターは、カラーピッカーと3つのスライダーを、すぐに貼り付けられる「ソフトUI」CSSブロックに変換します。ニューモルフィズム(「new」と「skeuomorphism」の組み合わせ)は、インターフェース要素が背景と同じ素材から形成されているように見えるデザイン傾向です — 表面から押し出されたり、その中に押し込められたり — 背景色とオフセットされたシャドウのペアだけを使って実現します。効果の背後にはグラデーショントリックや画像アセットはありません。背景より明るいシャドウ(光源をシミュレート)を、その反対側の暗いシャドウ(それが投げかける影をシミュレート)に配置することだけから、完全に錯覚が生まれます。

生成されるプロパティ

background: <color or gradient>;
border-radius: Npx;
box-shadow: Dpx Dpx Bpx <darker>, -Dpx -Dpx Bpx <lighter>;

background — Flatスタイルではそのままのベースカラー、またはConvex(raised)とConcave(pressed)ではやや明るいから暗い色合いの間のソフトな対角グラデーション — グラデーション方向は2つの間で反転し、一方が突き出たように見え、もう一方が沈み込んだように見えます。
border-radius — ボーダーラジウススライダーから丸角を。ニューモルフィック要素はほぼ常に丸角です。鋭角は「形成された素材」の錯覚を壊します。
box-shadow — 距離スライダーでオフセットされた2つのシャドウ、反対方向：右下方向(左上から照らされているように)でより暗い色合い、左上方向でより明るい色合い。どちらも同じぼかし半径を共有するため、硬いシャドウラインを表示する代わりに、エッジで背景に消えていきます。

より明るい色合いとより暗い色合いはベースカラーから各RGBチャネルを白または黒に向かって固定量だけ押すことで導き出されます — 元々の「Neumorphism in User Interfaces」の2019/2020年の普及以来、効果が使用してきた同じライテン/ダーケン数学です。

使い方

背景色を選択してください — 出力のすべてのシャドウとグラデーションがそこから導き出される基盤なので、効果は中間色の低彩度カラー(#e0e5ecのようなソフトグレーが古典的なニューモルフィックパレット)で最も良く機能します。非常に暗いまたは非常に彩度の高い色はシャドウが必要とするコントラストを低下させます。
スタイルを選択してください：Flatはシャドウペアのみの単色パネル、Convexは外に膨らんで見えるグラデーションを追加、Concaveはパネルが内側に押し込まれたように見えるようにそのグラデーションを反転します。
距離をドラッグして明るい/暗いシャドウが要素から広がる距離を設定し、ぼかしでエッジの柔らかさを制御してください — 対応する距離と一致する大きいぼかし値は最も滑らかな「形成された」外観を提供します。
ボーダーラジウスをパネルのコーナーの丸さのために設定してください。
生成されたCSSをコピーして、選択した色に合致(またはほぼ合致)する背景を持つブロックレベル要素に適用してください — ニューモルフィズムは要素の周辺がそのベースカラーを共有する場合にのみ正しく読まれます。シャドウがそれに対して調整されているためです。

FAQ

なぜ私の要素が「ソフトUI」ではなく平らに見えるのですか? 親/ページの背景はここで選択した色に合致(またはほぼ合致)する必要があります。ニューモルフィズムは要素が2つの微細なシャドウを除いてその周辺に融け込むことに依存します — 白いページにグレーのベースカラーで配置し、錯覚は壊れます。

ニューモルフィズムがアクセシビリティのリスクと考えられるのはなぜですか? 効果全体は要素とその背景の間の非常に低いコントラストに依存しており、これはアクセシビリティガイドライン(WCAGコントラスト比など)が警告するまさにその通りです。装飾的なサーフェスと低リスクUIに使用してください。テキスト、ボタン、またはユーザーが一目で区別する必要があるものには使用しないでください。

insetシャドウで真の「押し込まれた」外観を得ることはできますか? このジェネレーターのConcaveスタイルは、CSS insetシャドウに切り替える代わりに背景グラデーションを反転することで、押し込まれた外観をシミュレートします。リテラルinsetシャドウが必要な場合は、生成されたCSSの各box-shadow値にinsetキーワードを追加してください。

このツールは私の色選択を保存またはアップロードしますか? いいえ。すべてはブラウザで局所的に実行されます — 入力したものはサーバーに送信されたり、保存されたりしません。

cssneumorphismsoft uigeneratorbox-shadowweb design

ツールが気に入りましたか？広告をなくしましょう。

1回のお支払いでアカウントから広告が完全になくなります。サブスクリプションも追跡もありません。

広告を削除

CSS ニューモルフィズム ジェネレーター

入力

出力