CSSグラデーション/box-shadowジェネレーター
カラーストップや角度を調整しながらCSSグラデーションを作成したり、複数レイヤーのbox-shadowを組み立てたりできるツールです。プレビューを見ながら値を微調整し、生成されたCSSをそのままコピーしてスタイルシートに貼り付けられます。
CSSグラデーション/box-shadowジェネレーターについて
CSSのlinear-gradientやradial-gradientは、複数の色（カラーストップ）とその位置を指定することで滑らかな色の変化を描画するプロパティです。角度やカラーストップの位置を少し変えるだけで印象が大きく変わるため、数値だけで調整するよりも視覚的に確認しながら作る方が効率的です。
box-shadowも同様に、複数のシャドウをカンマ区切りで重ねることで立体感のある表現が可能ですが、レイヤーの記述順によって前後関係（最初に書いたものが最前面）が決まる点に注意が必要です。このツールはスライダーとカラーピッカーで両方のプロパティをプレビューしながら調整し、そのままコピーできるCSSコードを生成します。
主な使い方
- 1ボタンやヒーローセクションの背景に使うグラデーションを視覚的に調整して作成する
- 2カードやモーダルに立体感を出すbox-shadowを複数レイヤーで組み合わせて作成する
- 3デザインカンプの色味に近いグラデーションをカラーピッカーで再現してCSSに落とし込む
- 4Tailwind CSSやCSS-in-JSで使うシャドウ・グラデーション値を素早く生成してコピーする
よくある質問
Q. 生成したCSSはそのまま使えますか？
A. はい。「background: linear-gradient(...);」や「box-shadow: ...;」の形式でコピーできるため、そのままスタイルシートやCSS-in-JSに貼り付けて使用できます。
Q. カラーストップやシャドウレイヤーは何個まで追加できますか？
A. 追加数に上限は設けていません。カラーストップ・レイヤーとも自由に追加・削除しながら好きな数の組み合わせを作成できます（カラーストップは最低2つ必要です）。
Q. 入力した色の情報はサーバーに送信されますか？
A. いいえ。すべての処理はブラウザ上で完結しており、色やレイヤーの情報が外部に送信されることはありません。
関連ツール
- カラーコード変換HEX・RGB・HSLのカラーコードを相互に変換し、色のプレビューも表示します。CSSやデザインツールで使う色の値をすばやく書き換えられます。ブラウザ内で完結し、インストール不要ですぐに使えます。
- CSS整形・圧縮CSSを見やすく整形（ビューティファイ）、または不要な空白やコメントを取り除いて圧縮（ミニファイ）します。圧縮後のサイズ削減率も確認可能。ブラウザ内で完結し、コードは外部に送信されません。
- JWT エンコード・署名ヘッダー・ペイロード・シークレットキーを入力してJWTトークンを生成します。HS256・HS384・HS512のHMAC署名に対応し、APIのテストや認証の動作確認に便利。ブラウザ内で完結し、鍵は送信されません。
- ハッシュ生成テキストからSHA-1・SHA-256・SHA-384・SHA-512のハッシュ値を生成します。チェックサムの照合や改ざん検知、キャッシュキーの作成などに便利。Web Crypto APIでブラウザ内で計算し、データは送信されません。
- UUID生成UUID v4をワンクリックで生成します。最大20件までの一括生成にも対応し、データベースの主キーやテストデータの作成に便利。暗号学的に安全な乱数（crypto.randomUUID）を使い、ブラウザ内で完結します。
- パスワード生成大文字・小文字・数字・記号を組み合わせた安全なランダムパスワードを生成します。長さや使う文字種を指定でき、強度メーターで安全性も確認可能。暗号学的に安全な乱数を使い、ブラウザ内で完結します。