カラー・デザインジェネレーターデザイン・配色

CSSシャドウ生成

CSSシャドウ生成ツールは、要素に落とす影（シャドウ）の CSS コードを GUI で作成できる無料の box-shadow ジェネレーターです。オフセット（水平・垂直位置）・ぼかし・広がり（spread）・色・不透明度をスライダーで調整するだけで、box-shadow と filter: drop-shadow() の CSS をリアルタイムに生成できます。

設定モード

出力タイプ

シャドウレイヤー設定

不透明度25%

水平位置0px

垂直位置10px

ぼかし20px

広がり-4px

内側（inset）

プリセット

CSS コード

.shadow {
  box-shadow: 0px 10px 20px -4px rgba(15, 23, 42, 0.25);
}

影の生成はすべてお使いのブラウザ内で行われ、入力した内容が外部サーバーに送信されることはありません。

プレビュー

サンプル要素設定

背景色

要素の色

形状

角丸16px

カラーピッカー

画像から色をスポイトで抽出し、カラーコードを取得できるツール。ルーペで拡大しながらピクセル単位で色を調べられ、HEX / RGB / HSL 切替やパレットのエクスポートに対応。無料・登録不要で、ブラウザだけで完結します。

デザイン・配色
業務効率化

カラーパレット抽出

画像をアップロードするだけで主要な配色（代表色）を自動抽出し、カラーパレットを作成できる無料ツール。HEX / RGB / HSL の確認、各色の占有率表示、色数の調整、CSS変数・SCSS・Tailwind 形式での書き出しに対応。画像はサーバーに送信されず、ブラウザだけで完結します。

抽出
デザイン・配色

配色パレット生成

ベースカラーを1色選ぶだけで、補色・類似色・トライアドなど配色理論に基づくカラーパレットを自動生成する無料の配色ジェネレーター。CSS変数・Tailwind・SCSS・JSON形式でエクスポートでき、コントラストの目安も確認できます。ブラウザだけで完結します。

ジェネレーター
デザイン・配色

カラーコード変換

HEX・RGB・HSL・HSV・OKLCH のカラーコードを相互変換できる無料ツール。透明度付きの RGBA・8桁 HEX・HSLA にも対応し、入力した色を全フォーマットへ一括変換してワンクリックでコピーできます。CMYK の参考値も表示。ブラウザだけで完結します。

コンバーター
デザイン・配色

コントラストチェッカー

前景色（文字色）と背景色のコントラスト比をリアルタイムに算出する無料のコントラストチェッカー。WCAG 2.1 / 2.2 の AA・AAA 基準への合否判定に加え、合格色の自動提案・色覚特性シミュレーション・APCA にも対応。配色のアクセシビリティをブラウザだけで確認できます。

チェッカー
デザイン・配色
アクセシビリティ

CSSグラデーション生成

色や方向、カラーストップをGUIで操作してCSSグラデーションを自動生成する無料ツール。線形・放射・円錐（conic）グラデーションに対応し、不透明度の調整やCSS変数・Tailwind・SCSS形式での出力、共有URLにも対応。コピペですぐ使え、ブラウザだけで完結します。

ジェネレーター
開発
デザイン・配色

CSSシャドウ生成ツールとは？

影は複数のレイヤーを重ねられるので、自然でやわらかい影から、立体感のあるリッチな影まで自由に表現できます。各レイヤーは内側（inset）にも切り替えられ、ドラッグで重ね順を入れ替えられます。色は HEX に加えて rgb() / hsl() の貼り付けにも対応しています。

画面上部の「シャドウレイヤー」と「ニューモーフィズム」はモード切り替えで使い分けられ、それぞれ独立した出力を生成します。シャドウレイヤーではソフトな影・Material 風のエレベーション・フローティング・ハードシャドウ・ロングシャドウ・グロー（発光）などのプリセットをワンクリックで適用でき、ニューモーフィズム（ニューモーフィック UI）の凹凸シャドウはベースカラー・距離・強さを調整するだけでリアルタイムに生成できます。プレビューの背景色・要素色・形状（角丸・円・四角）を変えながら、実際の見え方を確認しながら調整できます。

作成した影は、CSS（box-shadow / filter）・CSS変数・Tailwind の設定・SCSS 変数の各形式でワンクリックでコピーでき、そのまま実装に貼り付けられます。「URL をコピー」を押すと現在の設定を再現できる共有 URL が得られ、チーム共有やブックマークにも便利です。影の生成はすべてお使いのブラウザ内で行われ、入力した内容が外部サーバーに送信されることはありません。ブラウザだけで完結します。

使い方

出力タイプ（box-shadow / drop-shadow）を選びます。box-shadow は spread（広がり）と inset（内側）に対応し、drop-shadow は要素の形に沿った影を作れます。
レイヤーを追加し、水平・垂直位置・ぼかし・広がり・色・不透明度をスライダーで調整します。複数のレイヤーはドラッグで重ね順を入れ替えられ、inset で内側の影にもできます。
「シャドウレイヤー」モードではプリセット（ソフト・Material・フローティング・ハード・ロングシャドウ・グロー）をワンクリックで適用できます。凹凸のある影は「ニューモーフィズム」モードに切り替え、ベースカラー・距離・強さを調整するとリアルタイムに生成されます。プレビューの背景色・要素色・形状を変えて仕上がりを確認します。
「CSS コード」で CSS・CSS変数・Tailwind・SCSS のタブを切り替え、「CSSコードをコピー」でコードを取得して実装に貼り付けます。「URL をコピー」で設定を共有できます。

利用シーン

ボタンやカード、モーダルなどにやわらかい影を付けたいデザイナー・コーダーが、box-shadow の CSS をコピペですぐに用意する。
複数レイヤーや inset を組み合わせて、立体感のあるおしゃれな影や内側の影を作り込みたいフロントエンドエンジニア。
ニューモーフィズム（ニューモーフィック UI）の凹凸シャドウを、ベースカラーから手早く生成したい方。
Tailwind の boxShadow 設定や CSS変数・SCSS 変数として、影をそのままコードに落とし込みたい開発者。
決めた影を共有 URL でチームに渡したり、後から同じ設定を再現したりしたい方。

注意点

影の生成はすべてブラウザ内で行われ、入力した内容が外部に送信されることはありません。
drop-shadow（`filter: drop-shadow()`）は spread（広がり）と inset（内側）に対応していません。これらは box-shadow を選んだときのみ反映されます。
drop-shadow を複数重ねると、前の影の結果にさらに影が重なります（カンマ区切りの box-shadow とは見え方が異なります）。
共有 URL には出力タイプ・各レイヤー（位置・ぼかし・広がり・色・不透明度・inset）・プレビュー設定が含まれます。URL を開くと同じ設定で影が再現されます。

よくある質問

入力した内容はサーバーに送信されますか？

送信されません。影の生成はすべてお使いのブラウザ内で完結します。ブランドカラーや業務で扱う配色でも安心してご利用いただけます。

box-shadow と drop-shadow の違いは何ですか？

box-shadow は要素の四角い境界に対して影を付け、spread（広がり）や inset（内側）にも対応します。filter: drop-shadow() は要素の実際の形（透過 PNG やアイコンの輪郭など）に沿った影を作れますが、spread と inset には対応していません。本ツールでは両方を切り替えながら作成できます。

ニューモーフィズム（凹凸シャドウ）の影は作れますか？

作れます。画面上部で「ニューモーフィズム」モードに切り替え、ベースカラーを選んで距離と強さを調整すると、明るいハイライトと暗い影の 2 レイヤーがリアルタイムに生成されます。凸（出っ張り）と凹（押し込み・inset）を切り替えられ、要素と背景は同じベース色に設定されます。シャドウレイヤーとは独立した出力として扱えます。

複数の影（多重シャドウ）や内側の影は作れますか？

作れます。レイヤーを追加するとカンマ区切りで複数の box-shadow を重ねられ、ドラッグで重ね順を入れ替えられます。各レイヤーは inset に切り替えることで内側の影にもできます。

Tailwind や CSS変数として書き出せますか？

できます。「CSS コード」のタブで CSS（box-shadow / filter）・CSS変数・Tailwind（boxShadow / dropShadow）・SCSS 変数を切り替えられ、「CSSコードをコピー」ボタンでコード全体をコピーしてそのまま実装に貼り付けられます。

作った影を共有・保存できますか？

「URL をコピー」を押すと、出力タイプや各レイヤーの設定を含む共有 URL が得られます。その URL を開くと同じ影が再現されるため、チームへの共有やブックマークに便利です。