UUUP Tools

デザインツール

CSSニューモーフィズム - ソフトUI向けシャドウ生成

background color、distance、blur から neumorphic な inset / outset shadow CSS を生成できます。button、card、light 系 soft UI control の raised / pressed 表現確認に向いています。

クイック切替→CSS Box Shadow ジェネレーター
CSSNeumorphismShadow
クイック切替:CSS Box Shadow ジェネレーターCSSグラスモーフィズム

このツールをお気に入りに

お気に入りの保存方法がまだ選ばれていません。

クイック操作

デザインツールに戻る すべてのツールを見る

このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。

利用シーン

  • soft button の shadow を調整する
  • light card に控えめな奥行きを付ける
  • raised / pressed control を比較する

使い方

  1. background color を選ぶ
  2. distance と blur を調整する
  3. preview して CSS をコピーする

入出力サンプル

背景色

#e0e0e0

出力

box-shadow: 9px 9px ...

FAQ

dark background でもうまく使えますか？

主に light background 向けです。dark UI では highlight と shadow の色を別途調整する必要があります。

box-shadow generator と何が違いますか？

こちらは neumorphism 特有の dual-shadow 構成を出力します。任意の offset、spread、layered shadow には一般的な box-shadow generator の方が向いています。

ツール

関連ツール

近い用途の翻訳済みツールへ続けて進めます。

CSS Box Shadow ジェネレーター

CSS Box Shadow ジェネレーター - 視覚的コントロール付き

利用可能

offset、blur、spread、color、opacity、inset を視覚的に調整し、カード、ボタン、オーバーレイ向けの box-shadow CSS をライブ生成できます。

CSS 影 box-shadow
ツールを開く

CSSグラスモーフィズム

CSSグラスモーフィズム - すりガラス風カード生成

利用可能

color、opacity、blur、outline を調整し、backdrop-filter を使った frosted glass card の CSS を preview しながら生成できます。半透明 panel や nav layer の調整向けで、処理はすべてブラウザ内です。

CSS Glassmorphism backdrop-filter
ツールを開く