コンテンツにスキップ
デザインとカラー

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

無制限のカラーストップをブレンドし、背景ルールをコピーします。

ブラウザで実行100%プライベートアップロードはありません
ツールを読み込み中…

このツールを共有する

必要な人に送ってください。

Xfin
完全なガイドを読む

CSS グラデーション ジェネレーター について

シンプルな 2 色のフェードからマルチストップ メッシュまで、視覚的にグラデーションを構成します。ライブパネルでプレビューし、角度や形を調整し、CSS または Tailwind 互換の任意の値をコピーします。

使い方

  1. 1グラデーションの種類を選択してください線形、放射状、または円錐形、線形グラデーションの角度制御付き。
  2. 2カラーストップを追加する各色とその位置を選択します。デザインに必要なだけストップを追加します。
  3. 3CSSをコピーするバックグラウンド宣言または生成された Tailwind クラスをスタイルシートにコピーします。

なぜこの css グラデーション ジェネレーター を使用するのでしょうか?

  • デバイスからは何も残らない. 作業はブラウザのタブで行われます。このアプリにはアップロード エンドポイントがないため、ファイルやテキストを保存したり、ログに記録したり、当社が閲覧したりすることはできません。
  • アップロードの待ち時間なし. サーバーへの往復を完全にスキップします。結果は、ネットワーク速度やキュー サイズではなく、ご使用の CPU によって制限されます。
  • 無料、アカウントなし、割り当てなし. サインアップの壁、ウォーターマーク、1 日あたりの制限はありません。オプションのアカウントは、デバイス間でお気に入りとプリセットを保存するためにのみ存在します。

よくある質問

私のグラデーションはここで安全に使用できますか?

はい。このツールは、JavaScript を使用してブラウザ内で完全に実行されます。貼り付けたり開いたりした内容はサーバーに送信されず、ページを閉じた後もページのコピーは保持されません。

アカウントを作成する必要がありますか?

いいえ。すべてのツールはサインインしなくても完全に使用できます。アカウントは、保存されたお気に入りと再利用可能なプリセットを追加するだけです。

電話でも機能しますか?

はい。インターフェースはモバイルファーストで、大きなタッチターゲットと積み重ねられたレイアウトを備えているため、デスクトップだけでなく携帯電話やタブレットでも動作します。

代替背景色を追加する必要がありますか?

はい。古いブラウザやハイコントラスト モードでも使用可能なサーフェスが表示されるように、最初に単色の背景色を宣言してから、その上にグラデーションを重ねます。

グラデーション上でテキストを読みやすく保つにはどうすればよいですか?

平均だけでなく、グラデーションの両端のコントラストを確認します。多くの場合、グラデーション自体に依存するよりも、微妙に暗いオーバーレイや単色のテキスト パネルを使用する方が安全です。

ツールボックスの同じコーナーからさらに無料のユーティリティが入手できます。