CSS グラデーション

CSS グラデーションはブラウザ上で動作する無料オンラインツールです。グラデーションの CSS コードを生成。インストールや登録は不要で、値を入力するだけで結果が表示されます。

使い方

1. 下の入力欄に値を入力します。
2. 結果が自動的に表示されます(またはボタンを押します)。
3. 結果をコピーしてご利用ください。

関連ツール

よくある質問

CSS グラデーションはどのカラー形式に対応していますか?

HEX は 3 桁・6 桁・8 桁の各形式、そして RGB と RGBA、HSL と HSLA に対応しています。共通の内部表現を経て変換するため、形式を行き来しても値がずれません。

アクセシビリティ基準を満たすにはどのくらいのコントラスト比が必要ですか?

WCAG 2.1 の AA 等級は本文テキストに 4.5 対 1、大きいテキストに 3 対 1 を求めます。大きいテキストとは太字 18.66 ピクセルまたは通常 24 ピクセル以上を指します。AAA 等級ではそれぞれ 7 対 1 と 4.5 対 1 に上がります。

出力をそのまま CSS に貼り付けられますか?

はい。生成される値は正しい CSS の色指定なので、スタイルシートやデザイントークンのファイル、コンポーネントのインラインスタイルに手を加えずそのまま貼り付けられます。