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

border-imageプロパティで美しいグラデーションボーダーを作成します。色、幅、半径、角度を調整して、CSSをコピーします。

135°
プレビューエリア
CSSコード 

    



    

      
仕組み

      
    
        
  1. 色を選択: ピッカーでグラデーションの2色以上を選択します。
    2. 
        
  2. 幅と半径を調整: デザインに合わせて厚さと角の丸みを調整します。
    3. 
        
  3. CSSをコピー: border-imageまたは擬似要素テクニックで生成されたコードは、スタイルシートに貼り付ける準備ができています。
    4. 
      


      
なぜこのグラデーションボーダージェネレーターを使うのか?

      
CSSグラデーションボーダーは、最新のUIフレームワーク、カード、ボタンのホバー状態、強調されたセクションで使用される印象的なデザイン詳細です。しかし、CSS borderプロパティは単色のみを受け入れます, グラデーションボーダーを作成するには、border-imageや擬似要素を使ったトリックが必要で、background-clipの操作が伴います。このジェネレーターは両方のテクニックをカバーし、構文ではなくデザインに集中できるようにクリーンでコピー可能なCSSを生成します。


      
機能

      

      
よくある質問

      

        なぜborder-imageでborder-radiusを使えないのですか?
        
border-imageはボーダーレンダリングを完全に置き換え、border-radiusを無視します, 角は四角いままです。グラデーションボーダーと丸い角を組み合わせるには、擬似要素テクニックを使用します: ::beforeの背景にグラデーションを適用し、要素自体にbackground-clip: padding-boxを適用します。

      

      

        グラデーションボーダーをアニメーション化できますか?
        
はい。背景+擬似要素方法で作成されたグラデーションボーダーは、グラデーションのbackground-positionをトランジションすることでアニメーション化できます。スムーズな効果のために、background-size: 300% 300%を適用し、background-positionをアニメーション化します。

      

      

        ボタンと入力フィールドで動作しますか?
        
はい、生成されたCSSは任意のHTML要素で動作します。ボタンには、border-radiusを保持するために擬似要素を優先します。入力フィールドには、border-imageテクニックを適用するか、入力をグラデーションコンテナでラップします。

      

    


    
    

      
CSSグラデーション枠線が実際に解決するもの

      
CSS borderプロパティは単一の純色を受け入れ、グラデーションは受け入れません。これは1996年代の制限で最新のCSSに残ったものです。ウェブ史のほとんどの間、カードやボタンの周りにグラデーション輪郭が欲しかったデザイナーは、背景画像を使う(ラスター、スケールしない)、要素を色付きコンテナで包む(機能するが微妙な方法でレイアウトを壊す)、または純色枠線を受け入れるかの間で選ばなければなりませんでした。CSSグラデーション枠線はborder: 3px solid linear-gradient(...)の見た目を他のCSSプロパティでシミュレートする回避策です。そのまさに正確な構文は存在しないからです。

      
2つのテクニックが支配的です。border-image(CSS Backgrounds and Borders Module Level 3、2012)は枠線レンダリングをグラデーションまたは画像に置き換えます。機能しますが、border-imageはborder-radiusを完全に無視します: 角は正方形のままです。疑似要素 + background-clipテクニックは、グラデーション背景を持つラッパー要素と、枠線エリア以外のすべてをマスクする内側オーバーレイを使います。これは丸い角をサポートしますが、CSSの2層とパディング対コンテンツボックスの慎重な扱いが必要です。第3の現代的なアプローチは、よりクリーンな単一要素ソリューションのためにmask-composite(2020+ブラウザ)を使います。

      
グラデーション枠線は現在のデザイントレンドにとって重要です。カードベースのレイアウト(Stripe、Linear、Vercel、Cursor)は微妙な2色グラデーション枠線を使用して、重さなしに深みを加えます。プレミアム機能のハイライトはしばしば"Pro"ステータスを示すためにカラフルなグラデーション枠線を描きます。サイバーパンクとシンセウェーブの美学はネオングラデーション枠線を使用してレトロ未来の雰囲気を呼び起こします。2023-2024年のAI製品ローンチは、ビジュアルシグネチャとして多色アニメーショングラデーション枠線で標準化しました(OpenAI、Anthropic、Perplexity)。以前は画像エディタが必要だったものが、今は5から10行のCSSで出荷されます。


      
このツールの内部での動作

      
プレビューはインラインCSSを介して適用された2つのテクニックを持つ単一のdivで、メソッドの選択で切り替え可能です。border-imageの場合、ツールはborder: Npx solid transparentをborder-image: linear-gradient(...) 1と共に設定します。1スライス値はブラウザにグラデーションを各枠線エッジで全サイズで使用するように指示します。疑似要素テクニックの場合、ツールは外側要素にグラデーション背景を適用し、::before(またはbackground-clip: padding-box)を使用して内側コンテンツエリアをマスクし、枠線リングだけが見えるようにします。

      
色のストップはJavaScript配列の{color, position}ペアとして保存されます。色を選んだり角度スライダーを動かしたりすると、ツールはlinear-gradient()文字列をストップをカンマで結合して角度を前置して再構築します: linear-gradient(45deg, #ff0080 0%, #7928ca 100%)。その文字列はプレビューCSSとコードボックスの両方に補間されます。角度スライダーは方向のフィードバックのためにビジュアルSVG矢印回転を持つ0から360度の範囲を使用します。

      
何もブラウザを離れません。グラデーション文字列生成、色の保存、プレビューレンダリング、クリップボードのコピーすべてがデバイス上のJavaScriptで起こります。ネットワークリクエストは行われません。どの色を選ぶかを追跡する分析はありません。ツールには初回ロードで一度提供される静的HTMLとJavaScript以外のバックエンドはまったくありません。ページを更新すると、最初にCSSをコピーしていない限り、選択した色と角度は失われます。


      
CSS枠線とグラデーションの簡単な歴史

      

      
現実世界のワークフロー

      

      
よくある落とし穴とその意味

      

      
プライバシー: すべてがブラウザで動作します

      
CSSジェネレーターツールは2つの味があります: クライアント側のJavaScriptを実行するシンプルなHTMLページ(プライベート、高速)と、プロジェクトを保存するクラウドエディタ(共同作業可能だがプライバシーのトレードオフがあります)。このツールは最初の種類です。選択した色、角度、生成されたCSS: すべてがブラウザセッションに留まります。ページを更新し、最初にCSSをコピーしていない限り、状態は失われます。サーバーはグラデーションの選択を保存せず、分析はどの色の組み合わせを試したかを追跡せず、アカウントは必要ありません。

      
プライバシーのプロパティは主に独自のデザイン作業に重要です。機密のブランドリデザインのためのグラデーション組み合わせのプロトタイピングを行うスタジオ、未発表の製品のUIアクセントに取り組む開発者、またはキャンペーンパレットを反復するデザイナー: 色の選択または反復履歴が作業に関する情報を漏らす可能性のあるすべての文脈。このツールでは、何も送信されないので何もキャプチャされません。ブラウザのネットワークタブを開くと、使用中にゼロの送信リクエストが表示されます。最初のページロードのみがHTMLとJavaScriptを取得します。


      
別のツールが正しい選択である場合

      

      
その他のよくある質問

      

        グラデーション枠線で3色以上を使用できますか?
        
はい。CSS linear-gradient()は無制限の色のストップを受け入れます: linear-gradient(45deg, #ff0080 0%, #ffa500 50%, #00d4ff 100%)は中間でオレンジを通って遷移する3色のグラデーションを作成します。それぞれにオプションの位置を持つ、好きなだけストップを追加してください。複雑な多色グラデーション(虹色効果)の場合、ストップを均等に分散: 0%、16.7%、33.3%、50%、66.7%、83.3%、100%。

      

      

        虹色またはconicグラデーション枠線を作成するにはどうすればよいですか?
        
conic(スイープ)グラデーションの場合、疑似要素padding-boxマスキングテクニックで外側要素の背景としてconic-gradient(from 0deg, red, yellow, lime, cyan, blue, magenta, red)を使用してください。回転効果(AI製品の読み込み状態で人気)の場合、CSS Houdiniを介して--angleをアニメート、または360度回転アニメーションを持つ@property --angleを使用してください。結果は枠線の周りのスムーズな色のスイープです。

      

      

        テーマ対応グラデーション枠線にCSSカスタムプロパティを使用できますか?
        
はい、そしてそれはデザインシステムの推奨アプローチです。グラデーションカラーをCSSカスタムプロパティ(--gradient-start、--gradient-end)として定義し、グラデーション宣言で使用してください: linear-gradient(var(--angle), var(--gradient-start), var(--gradient-end))。変数をダークモードメディアクエリまたはテーマクラスで上書きしてください。1つのCSSファイルが変数の再定義を介してライトとダークの両方のテーマを処理します。

      

      

        これはInternet Explorerのような古いブラウザで動作しますか?
        
Internet Explorer 11(Microsoftによって2022年6月に公式に引退)は部分的なborder-imageサポートを持っていましたが、信頼性のないグラデーションレンダリング、そしてmask-compositeはありませんでした。最新のブラウザ(Chrome 88+、Firefox 78+、Safari 14+)は両方のテクニックを完全にサポートします。IEをサポートする必要がある場合、グラデーションの中間色を使用した純色フォールバックを提供してください: グラデーションルールの前にborder: 3px solid #888;を宣言し、IEはそれを使用しながら最新のブラウザはグラデーションを適用します。

      

      

        グラデーション枠線を行う単一プロパティの方法はありますか?
        
標準化されたCSSにはまだありません。最新の提案(CSS Backgrounds and Borders Module Level 4ドラフト)は直接グラデーションを受け入れるborder-colorプロパティを含みますが、ブラウザの実装はまだ安定していません。現在最も近い近似は単一要素を使用するが、3つのCSS宣言を必要とするmask-compositeテクニックです。2027年または2028年までに、border: 3px solid linear-gradient(...)が単に機能することを願っています。

      

      

        なぜグラデーション枠線がSafariで異なって見えるのですか?
        
Safariは歴史的にChromeとFirefoxに対してCSS機能のパリティで遅れています。特にmask-composite値とbackground-clipのいくつかのエッジケースに対して。明示的にSafariでテストしてください。疑似要素テクニックがSafariで失敗する場合、border-imageに切り替えてください(普遍的に機能しますがborder-radiusを失います)、またはSafari固有のプレフィックスを使用してください: -webkit-mask-compositeが古いSafariバージョンに必要な場合があります。iOS Safariは2024バージョンでもしばしばプレフィックスが必要です。

      

    


    
    

      
関連ツール

      

        CSSグラデーションジェネレーター
        CSSアニメーションジェネレーター
        CSS Border Radiusジェネレーター
        CSSテキストグラデーションジェネレーター