⚡すべてのツール 💻開発者ツール 📝テキストツール 🎨デザインツール 🖼️画像・メディア 🔢計算ツール 🔒セキュリティ 📄PDFツール 📐単位変換

CSSシャドウ＆グラスモーフィズム生成器

CSSシャドウと背景ぼかし効果をリアルタイムで調整し、CSSコードをコピーします。

Shadow Layers

プリセットテンプレート

Preview

ALPAKIT CSS LAB 🦙

Alpa デザインカード 100% Client-side Rendering

CSS Code

使い方

1 CSSシャドウ＆グラスモーフィズム生成器を開き、処理する内容を入力、貼り付け、または選択します。
2 目的に合わせてオプションと出力形式を調整します。
3 結果を確認し、必要に応じてコピーまたはダウンロードします。

主な利用シーン

CSSシャドウと背景ぼかし効果をリアルタイムで調整し、CSSコードをコピーします。日常業務、開発、学習、簡易確認に利用できます。

プライバシーとデータ処理

このツールはブラウザで動作します。機密データを扱う前に、端末とブラウザの安全性を確認してください。

CSS box-shadow・グラスモーフィズムジェネレーター

このツールでは、CSS の影とすりガラス風エフェクトをスライダーで調整し、右側のカードでリアルタイムに確認しながら、そのままプロジェクトに貼り付けられる CSS を生成できます。「Box Shadow」タブでは、レイヤーごとに水平・垂直オフセット（-50〜50px）、ぼかし半径（0〜100px）、広がり（-30〜50px）、色と不透明度を設定でき、Inset にチェックを入れると内側の影になります。初期状態の出力は box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.30); で、色は rgba 形式で書き出されます。

「影レイヤーを追加」で複数の影を重ねられ、出力ではカンマ区切りになります。リストの先頭にあるレイヤーほど上に描画されます。自然な影は「近くてはっきりした影」と「遠くて柔らかい影」の組み合わせでできていることが多く、内蔵の 3D Double プリセットも 0 5px 5px と 0 20px 25px の薄い黒い影を 2 層重ねて、1 枚の大きな影より自然に見せています。広がりをマイナスにすると影が要素より一回り小さくなり、カードの下にふんわり落ちる影によく使われます。Glow Light プリセットはブランドカラー、オフセット 0、大きなぼかしで発光感を出しています。

「Glassmorphism」タブではすりガラス風のカードを作れます。背景ぼかし（backdrop-filter: blur、0〜40px）、背景色とその不透明度、1px の枠線の色と不透明度を調整します。生成される CSS には backdrop-filter と、Safari に必要な -webkit-backdrop-filter の両方が含まれます。この効果のポイントは「背景が半透明で、その奥に何かがあること」です。単色の上ではぼかす対象がないため変化が分からないので、プレビューではグラデーションと暗い背景を切り替えて比較できます。

実際に使うときの注意点もあります。広い範囲に backdrop-filter をかけると性能の低いスマホでは負荷が大きいため、数枚のカードやナビゲーションバーなどに絞るのがおすすめです。半透明の背景に置く文字はコントラストに気をつけ、背景の不透明度が低い場合は色を濃くするか文字を太くしましょう。rgba の値は CSS カスタムプロパティや Tailwind の任意値記法にもそのまま使えます。すべてブラウザ内で動作し、登録も不要です。