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

Linear / Radial / Conic を視覚編集。複数カラーストップ、角度・位置・補間方式調整、レイヤー重ね、プリセット、Tailwind/SCSS出力、PNG/SVGエクスポート、URL 共有まで。完全ローカル処理。

背景

カラーストップ2

出力コード

グラデーションタイプ

deg (CSS: 135deg)

補間 (CSS Color 4)

繰り返し

ベンダープレフィックス付与（-webkit-）

レイヤー（複数重ね）

複数のグラデーションを background に重ねます。半透明ストップで効果的。

プリセット

履歴

編集を加えるとここに保存されます

使い方とヒント

カラーストップ追加: 上のバーをクリックでその位置に追加、または「＋ストップ追加」ボタン。ハンドルをドラッグで位置調整
透明ストップ: HEXに #FF0000AA のように 8 桁で指定するとアルファ付き。重ねレイヤーや fade out 効果に
レイヤー重ね: 半透明グラデーションを上に重ねることで、画像とのオーバーレイや複雑な背景を 1 つの background で表現可能
補間方式: in oklch で人間の知覚に近い自然な色変化に。in hsl longer hue で虹色グラデが作れる（モダンブラウザのみ）
conic-gradient: 円グラフ風、ローディングスピナー、円錐状の背景に。from で開始角度を指定
repeating: ストライプ・チェッカー・等高線などの繰り返しパターンを生成
URL共有: 「🔗 URL共有」でハッシュ付き URL を生成。チーム内で設定を共有可能
エクスポート: PNG / SVG / CSS をダウンロード。Canvas に正確なサイズで描画

関連ツール: カラーコード変換 / 画像圧縮 / QRコード生成

コピーしました