CSSボーダーグラデーションジェネレーター
CSSグラデーションボーダーコードをリアルタイムで生成します。
135°
0%
100%
プレビュー
CSSコード
.element {
background:
linear-gradient(#1a1a2e, #1a1a2e) padding-box,
linear-gradient(135deg, #6366f1 0%, #ec4899 100%) border-box;
border: 3px solid transparent;
border-radius: 12px;
}CSSボーダーグラデーションとは？
CSSのborder-colorは単色のみ対応しているため、グラデーションボーダーにはbackground-clipトリックを使用します。padding-boxとborder-boxに背景を重ねて適用する方式です。
グラデーションタイプ
Linear Gradient（線形）
指定した角度で色が直線的に変化します。上から下、斜めなど方向感のあるボーダー効果に適しています。
Conic Gradient（円錐形）
中心点を基準に色が回転しながら変化します。ボーダーに適用すると、虹のように全体を色が循環する効果が生まれます。
使い方
グラデーションタイプ（LinearまたはConic）を選択し、角度とカラーストップを設定して、ボーダー幅とradiusを調整し、生成されたCSSコードをコピーしてください。
よくある質問
border-colorにグラデーションを直接適用できますか？
CSSのborder-colorは単色のみ対応しています。このツールはbackground-clipトリックを使用してJavaScriptなしでグラデーションボーダーを実現します。
linearとconicグラデーションボーダーの違いは何ですか？
linearは一方向（例：上から下）に色が流れます。conicは要素の周りを色が循環するため、ボーダー全体にすべての色が均等に表現されます。
全ブラウザで対応していますか？
background-clip方式はChrome・Firefox・Safari・Edgeの最新版で対応しています。Internet Explorerは非対応です。
Tailwind CSSでグラデーションボーダーを使うには？
Tailwindの標準ユーティリティでは直接サポートされていません。生成したCSSを@layer utilitiesに追加するかインラインスタイルで適用してください。
conicグラデーションボーダーとは何ですか？
円錐形グラデーションをボーダーに適用したスタイルで、虹色や回転するような効果を表現できます。
アニメーションするグラデーションボーダーは作れますか？
@keyframesとCSS変数を使ってconic-gradientの角度をアニメーションさせることで、回転するグラデーションボーダーを作成できます。