CSS グラデーション生成

線形と円形のグラデーションを視覚的に作り、CSS をコピーするか背景画像を書き出し。

CSS グラデーションを手書きするのは、角度とストップ位置を当たるまで勘で決める作業です。このツールはそれを視覚化します。角度をドラッグし、ストップを追加・削除・移動して結果を確認できます。その後、CSS をコピーするか 1920×1080 の背景画像を書き出します。

使い方

1. 1グラデーションの種類（線形・円形・円錐）を選びます。
2. 2角度を決め、カラーストップを追加・削除・移動します。
3. 3CSS をコピーするか、PNG をダウンロードしてカバー背景に使います。

よくある質問

関連ツール

• Midjourney グリッド分割2×2 や 3×3 の AI グリッド画像を個別タイルに切り、まとめてダウンロード。
• 画像圧縮画像を入れて品質スライダーで軽く——前後のサイズを表示、アップロードなし。
• 画像リサイズピクセル指定かプリセット（Xiaohongshu / Instagram / X / 動画カバー）でリサイズ、比を固定。
• カラーパレット抽出画像から主要な色を HEX/RGB 値と、すぐ使える CSS 変数として抽出。
• 画像フォーマット変換PNG・JPG・WebP をブラウザ内で一括変換、品質調整付き、アップロードなし。
• EXIF メタデータ削除カメラ・日時・GPS のメタデータを再エンコードで除去——まずプライバシーをチェック。
• 画像クロッパー範囲をドラッグ、定番の比を固定、回転と反転、そのまま書き出し。
• 白背景メーカーフラットな背景をワンクリックで白に——商品写真がきれいに、アップロードなし。
• SVG プレビュー・PNG変換SVG マークアップを貼り付けてプレビューし、任意の倍率で透過 PNG を書き出し。
• カラーパレット生成ベースカラーから相性・三元色・類似の配色を HEX と CSS 変数で生成。