CSS Box-Shadow＆グラデーション生成ツール｜多層シャドウ・Tailwind出力対応【無料版あり】

多層シャドウをスライダーで直感生成し、CSS または Tailwind CSS のクラスとして

コピーできるツールです。グラデーション背景の合成機能も付いています。

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

できること

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

◆ 多層シャドウ（最大5層）のリアルタイムプレビュー

◆ プレーンCSS（box-shadow）での出力

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

◆ グラデーション背景（linear-gradient）の合成

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

使い方

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

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

2. 「＋ レイヤーを追加」で影を重ねる

3. 各レイヤーのスライダーで調整し、「プレーンCSS」「Tailwind」タブで形式を切り替え

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

5. グラデーション背景は角度・色１・色２を調整して同じようにコピーできます

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

動作について

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

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

・外部の部品（CDN・ライブラリ）を読み込みません。HTML1枚で完結しています

・オフラインで動きます

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

■ 使ってよい範囲

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

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

■ 同梱物

　generator.html ／ README.txt