【無料】CSS Box-Shadow生成ツール｜スライダーで直感的に影を作ってコピー

スライダーを動かすだけで、自然な影のCSSコードを作れるツールです。

PhotoshopやFigmaの影の数値をCSSに手打ちして汚くなる問題を解消します。

━━━━━━━━━━━━━━━━━━━━

この無料版でできること

━━━━━━━━━━━━━━━━━━━━

◆ 単層シャドウのCSSコード生成

◆ 内側（inset）シャドウにも対応

◆ リアルタイムプレビュー

━━━━━━━━━━━━━━━━━━━━

有料版に入っているもの

━━━━━━━━━━━━━━━━━━━━

◆ 影を何層も重ねる「多層シャドウ」生成（写真編集ソフトのようなリッチな影）

◆ Tailwind CSS の任意値クラス（shadow-[...]）として出力

◆ グラデーション背景の合成機能

━━━━━━━━━━━━━━━━━━━━

使い方

━━━━━━━━━━━━━━━━━━━━

1. generator.html をダブルクリックしてブラウザで開く

2. スライダーで横のズレ・縦のズレ・ぼかし・広がり・不透明度・色を調整

3. 「コードをコピー」でCSSコードを取り出せます

━━━━━━━━━━━━━━━━━━━━

動作について

━━━━━━━━━━━━━━━━━━━━

・外部のサーバーと通信しません。広告もトラッキングもありません

・HTML1枚で完結しています。オフラインで動きます

・設定した値はこの端末の中だけで扱われ、どこにも保存されません

■ 使ってよい範囲

　業務・個人開発にお使いいただけます。クレジット表記は不要です。

　ファイルそのものの再配布・販売はご遠慮ください。

■ 同梱物

　generator.html ／ README.txt