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

グラデーションボーダーを数秒で作成。色・方向・幅・角丸を自由にカスタマイズして、すぐに使えるCSSコードをコピーできます。外部ライブラリ不要・登録不要。

使い方

色を選ぶ — カラースウォッチをクリックしてカラーピッカーを開くか、HEXコードを直接入力します。「＋ カラーストップを追加」ボタンで最大5色まで追加でき、×ボタンで削除できます（最低2色は必須）。

位置を調整する — 各カラーストップの横にあるスライダーで、グラデーション内での色の開始位置（0〜100%）を指定します。

方向を決める — 8方向のプリセットボタン（0°・45°・90°など）から選ぶか、カスタム角度スライダーで0〜360°を自由に設定します。

ボーダーを設定する — スライダーでボーダー幅（1〜10px）・角丸（0〜50px）・パディングを調整します。

CSSの実装方法を選ぶ — 2種類の実装方法から選択できます：

• background-clip（推奨）：外側の要素にグラデーション背景を設定し、内側の要素で白背景を重ねる手法。角丸対応で全ブラウザで動作します。
• border-image：1要素のみのシンプルな実装ですが、border-radiusには非対応です。

プリセットを適用する — プリセットギャラリーのタイルをクリックするだけで即適用されます。夕焼け・海・桜・炎など日本語名のカラーセットを12種収録。

CSSをコピーする — 「CSSをコピー」ボタンを押してクリップボードにコピーし、スタイルシートに貼り付けるだけです。

CSSグラデーションボーダーの実装方法

background-clip を使う方法（推奨）

角丸にも対応した最も汎用性の高いアプローチです。外側の要素にグラデーション背景と border-radius を設定し、内側の要素で白（または任意の色）背景を重ねます：

.gradient-border {
  padding: 20px;
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
  border-radius: 12px;
}

.gradient-border-inner {
  background: #fff;
  border-radius: 9px;
  padding: 3px;
}

border-image を使う方法

HTMLが1要素で済むシンプルな手法ですが、border-radius は機能しません：

.gradient-border {
  border: 3px solid transparent;
  border-image: linear-gradient(90deg, #6366f1 0%, #ec4899 100%) 1;
}

ダークモードや透過背景が必要な場合は、::before 擬似要素を使って background-clip: padding-box と組み合わせる手法もよく使われます。

デザイン業務の会計管理にはfreee フリーランスのデザイナーやエンジニアの方、経費精算・請求書発行もfreeeでまとめて管理しませんか？ freeeを無料で試す →

※本ページには広告リンクが含まれています。

関連ツール

Border Radius Generator → Border Radius Generatorツール Glassmorphism Generator → Glassmorphism Generatorツール Gradient Gallery → Gradient Galleryツール