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

2色以上を選び、グラデーションをドラッグしてお好みに調整し、CSSをコピー。またはPNGとしてダウンロードして、壁紙、スライド背景、ソーシャル投稿の背景として使用できます。リニア、ラジアル、コニックグラデーションに加え、モダンなUIで見られるソフトなAppleスタイルの背景用にメッシュグラデーションモードもサポートしています。

グラデーションの種類

• リニア：色Aから色Bへの直線。方向指定（上→下、斜めなど）。
• ラジアル：同心円状 — 中心の色Aから端に向けて色Bにフェード。スポットライト効果に便利。
• コニック：中心点を周回するカラーホイール状。モダンUIデザインでトレンド。
• メッシュ（プレミアム）：複数の色の塊を滑らかにブレンド。Appleグラデーション風の外観。

コピーできるもの

1. CSS：すぐに貼り付け可能なlinear-gradient(...)またはbackground-image:宣言。
2. Tailwind：最も近いbg-gradient-*クラスとカスタムカラーの追加。
3. SVG：アイコンやUIグラフィックでのスケーラブルな使用に。
4. PNGダウンロード：あらゆるサイズに対応。スマホ壁紙（1284×2778）、デスクトップ（3840×2160）、正方形（1080×1080）など。

よくある使用例

• スマホ壁紙：iOSではメッシュグラデーションが人気。ぜひiPhone壁紙プレビューでテストしてみてください。
• ソーシャル投稿の背景：引用グラフィックに即座にブランド感を与えます。
• ヒーローセクション：グラデーション背景はランディングページでよく使われます。
• スライドデッキ：退屈な単色背景を置き換えます。

効果的な色の選び方

色相環で隣り合う色は控えめで調和が取れ、反対色は大胆で目を引きます。3つ目の中間ストップを追加して広いギャップを埋めましょう。ブランドに忠実なグラデーションには、ブランドのHEXコードを貼り付け、2番目のストップに色合い（tint）または陰影（shade）を選びます。カラーコンバーターを使って、色合い（明度が高いHSL）や陰影（明度が低い）を見つけてください。