ベスト・フリー CSS グラデーション生成

ライブプレビューで線形と半径方向のCSSグラデーションを作成します。背景コードをコピーします。

角度: 90°
100%フリー 登録なし 透かしなし メモリで処理されたファイルは保存されません
画像、ビデオ、チャットなどのAIモデルを最適化するためのGo Proを利用し、アップロードの大きさ、キューの優先順位、待ち時間の無い機能を追加した。 プロにアップグレード
ラブ best.free? 分けて

仕組み

  1. タイプを選択. 線形グラデーションの角度を設定します。
  2. 色と停止を選択. 二つ以上の色とその位置を設定します。 詳細オプションで第三の停止を追加します。
  3. CSS をコピー. CSS をコピーして、背景のグラデーションをスタイルシートに貼り付けます。

このツールの情報

目で見てCSSグラデーションを作成します。線形と半径の間を切り替え、線形グラデーションの角度をドラッグし、フル幅のプレビューバーがリアルタイムで更新される間に少なくとも2ストップの色と位置を選択します。結果として生成される背景プロパティをスタイルシートに直接コピーします。高度なオプションは、より豊かな混合のために3 番目の色の停止を追加し、半径グラデーションの円形または楕円形を選択します。すべてブラウザで実行されます。

人々がそれを使うために

  • ヒーローまたはセクションの背景のグラデーションをデザインします
  • ボタンまたはカードのグラデーション充填を作成
  • 2つまたは3つのブランド色を滑らかに混ぜる
  • 放射状スポットライトまたはビニール効果を生成

よくある質問

線形グラデーションは、選択した角度で直線に沿って融合します。半径グラデーションは、中心点から円や楕円のように外へ融合します。

線形グラディエントの場合,角度はブレンドの方向を決める。

各停止点はグラデーションに沿ってパーセントで配置された色です。停止点を移動すると、色の位置と混合の鋭さが変わります。

はい。複数色の混合において、最初と最後の色の間に挿入する第 3 色の停止を追加するには、詳細オプションを開きます。

色と停止はブラウザ内でローカルに CSS 文字列に変換されます。

完全に無料で、アカウントも制限もありません。 計測するものが何もないクライアントサイドツールです。

CSS グラディエント ジェネレータはブラウザ上で動作します。デスクトップと同様に携帯電話やタブレットでも動作します。インストールするアプリケーションはありません。

CSS Gradient Generator は、入力した瞬間に動作を開始します。

普段の使用は無制限で、 寛大なフェアユースの下で、 誰もが速く保つ。

Chrome、Safari、Firefox、Edgeなどの最新のブラウザ。CSS グラデーション生成は既に使用しているブラウザ以外のインストールは必要ありません。

関連ツール

このページを評価
5.0/5 (0)

改善できることは何ですか?フィードバックは問題を解決するのに役立ちます。