WebTools
🇺🇸🇯🇵🇨🇳🇰🇷

グラデーション生成

CSSグラデーションを生成します。色と方向を選んでCSSをコピー。

Gradient Generator

#3B82F6
#8B5CF6
background: linear-gradient(to right, #3B82F6, #8B5CF6);

関連ツール

カラーコード変換（HEX/RGB/HSL）CSSカラー名一覧CSS単位変換（px/rem/em）ボックスシャドウ生成

グラデーション生成の主な使い方・用途

  • ✓WebサイトのCSS背景グラデーション作成
  • ✓バナー・ヒーロー画像のデザイン
  • ✓ボタンのグラデーション効果
  • ✓モバイルアプリのUI背景
  • ✓Figma・XD用カラー設計

使い方（ステップ別）

  1. 1
    2色を選ぶ— グラデーションの開始色と終了色をカラーピッカーで選択します。
  2. 2
    方向を設定する— グラデーションの方向（右・下・斜めなど）を選択します。
  3. 3
    CSSをコピーする— 生成されたCSSをコピーしてスタイルシートに貼り付けます。

このツールの特徴

  • ●8方向のグラデーション対応
  • ●リアルタイムプレビュー
  • ●background CSSの直接コピー
  • ●2色グラデーション生成

このツールについて

CSSグラデーションを生成します。色と方向を選んでCSSをコピー。