CSS ボックスシャドウジェネレータ
box-shadowを視覚的に作成し、CSSコードを即座にコピー。
ニューモーフィズムなどのプリセットも利用できます。
プレビュー
プリセット
パラメータ
CSS コード
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
box-shadowの基本
水平オフセット (X): 影を左右に移動します。正の値で右、負の値で左に影が移動します。
垂直オフセット (Y): 影を上下に移動します。正の値で下、負の値で上に影が移動します。
ぼかし (Blur): 影のぼかし具合を調整します。値が大きいほどソフトな影になります。
広がり (Spread): 影のサイズを調整します。正の値で影が拡大、負の値で縮小します。
Inset: ONにすると内側の影になり、要素がへこんだような表現ができます。
ニューモーフィズム（Neumorphism / New Skeuomorphism）とは、近年のUIデザインで注目されているビジュアル表現の一つで、フラットデザインとスキューモーフィズムを融合させたデザイン手法です。背景と同系色の要素に、非常に柔らかいハイライトとシャドウを加えることで、まるで要素が背景から「浮き出ている」「凹んでいる」ような立体感を表現します。
CSSにおけるニューモーフィズムの最大の特徴は、box-shadowを複数組み合わせて使う点にあります。明るい影（ハイライト）と暗い影を対角線上に配置することで、シンプルな要素でも奥行きのあるUIを実現できます。このため、特別な画像やライブラリを使わず、純粋なCSSだけで実装できることが多く、フロントエンドエンジニアやWebデザイナーから高い関心を集めています。
また、ニューモーフィズムはミニマルで洗練された印象を与えるため、設定画面やダッシュボード、ツール系UIと相性が良いとされています。一方で、コントラストが弱くなりやすく、可読性やアクセシビリティに注意が必要という側面もあります。そのため、ボタンや入力欄などのインタラクティブ要素に使う場合は、ホバー時やアクティブ時の視覚的フィードバックをCSSで明確に設計することが重要です。
このようにニューモーフィズムは、CSSの基本プロパティだけでトレンド感のあるUIを表現できる手法であり、適切に使えばサイト全体の印象を大きく向上させることができます。次のセクションでは、実際にCSSでニューモーフィズムを実装する具体例を紹介します。