デザインツール

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

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

クイック切替→CSS グラデーションジェネレーター

CSS影box-shadow

クイック切替:CSS グラデーションジェネレーターカラーフォーマット変換 Glassmorphism ジェネレーター

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

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

クイック操作

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

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

利用シーン

ボタンやカードに外側の影を追加する
オーバーレイや輪郭の強い影を調整する
inset を使った凹み表現の UI を作る

使い方

X/Y offset、blur、spread をスライダーで調整する
影の色と opacity を設定し、必要なら inset を有効にする
プレビューを確認して生成された CSS をコピーする

入出力サンプル

パラメータ

X: 0、Y: 4、ぼかし: 6、拡張: -1、rgba(0,0,0,0.1)

CSS

box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);

FAQ

inset shadow に対応していますか？

はい。Inset を有効にすると、inset キーワード付きの box-shadow を生成し、プレビューにも即時反映されます。

複数レイヤーの影も作れますか？

UI は 1 レイヤーずつ生成します。複数レイヤーにしたい場合は複数回調整し、box-shadow の値をカンマ区切りで連結してください。

ツール

関連ツール

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

CSS グラデーションジェネレーター

CSS グラデーションジェネレーター - Linear、Radial、Conic

利用可能

linear、radial、conic の CSS グラデーションを視覚的に作成できます。角度や stop 位置を調整し、複数 stop を追加して、背景、ボタン、ブランド遷移向けの CSS をコピーできます。

CSS グラデーション背景

ツールを開く

カラーフォーマット変換

カラーフォーマット変換 - HEX、RGB、HSL オンライン

利用可能

HEX、RGB、HSL、HWB、CMYK、CSS 変数のあいだで色をブラウザ内変換できます。カラーピッカーとランダムカラー補助も備え、デザインの引き継ぎ、スタイルシート作業、ブランドカラー整合に役立ちます。

カラー HEX RGB

ツールを開く

Glassmorphism ジェネレーター

Glassmorphism ジェネレーター - backdrop-filter CSS

利用可能

blur、opacity、background color、border opacity を視覚的に調整し、-webkit prefix 付きの frosted-glass CSS を生成できます。カード、ナビバー、モーダルのレイヤー表現に便利です。

CSS Glassmorphism backdrop-filter

ツールを開く