Smooth Shadow & Glassmorphism Generator
Preview
Preview Card
This is how your shadow effect looks in real context.
Background
Controls
Presets
Object Settings
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15), 0px 0px 10.666666666666666px 0px rgba(0, 0, 0, 0.08269229289470176), 0px 0px 15.333333333333332px 0px rgba(0, 0, 0, 0.053060307891921274), 0px 0px 20px 0px rgba(0, 0, 0, 0.029999999999999992);About this Tool
Ultimate Smooth Shadow & Glassmorphism Generatorは、物理演算に基づいた「積層シャドウ」や、空間を歪める「グラスモーフィズム」を生成し、エンジニアが直感的に「ハイエンドな質感」を手に入れるためのデザインスタジオです。
主な機能
- Smooth Shadow Mode: 指定された「最終的な影」に向かって、指数関数的に減衰する最大6層の影を自動生成。カーブ調整、環境色の設定により、発光するような美しい影を作成できます。
- Glassmorphism Mode: すりガラス効果を実現。透明度、ブラー、彩度強調、半透明ボーダーを調整して、Apple風の高級感のあるUIを作成できます。
- Neumorphism Mode: ニューモーフィズムスタイルを生成。光源角度、強度、形状（凸/凹）を調整できます。
- Dynamic Backgrounds: プレビューエリアの背景をMesh Gradient、カスタム画像、単色から選択可能。グラスモーフィズムの効果を正確に確認できます。
- Premium Presets: Stripe、Vercel、Material v3、macOS Sidebarなど、有名企業のスタイルを模したプリセットをワンクリックで適用。
- Comparison Toggle: 標準の単一CSSシャドウと比較して、Smooth Shadowの美しさを視覚的に確認できます。
出力形式
- Raw CSS: 生成された
box-shadowやbackdrop-filterをそのままコピー - Tailwind JIT: Tailwind CSSのJIT記法で使用可能なクラス文字列
- Tailwind Config:
tailwind.config.jsに追加する設定オブジェクト形式
プライバシーとセキュリティ
すべての処理はブラウザ上で完結します。入力されたデータがサーバーに送信されることは一切ありません。
Update Log
- 初回リリース。Smooth Shadow、Glassmorphism、Neumorphismの3モードを実装。Premium Presets、Comparison Toggle、Dynamic Backgrounds機能を追加。
