グラデーション生成ツール

ライブプレビューで線形グラデーションまたは円形グラデーションのコードを生成します。

計画やリファレンス用のブラウザ上での結果です。

カラー A色 B 角度Mode

CSS / HEX

ガイド

使用前のチェック事項

このツールを使って、2 色のウェブ背景やカードのアクセントを作成します。開始色と終了色、線形または放射状のタイプ、および角度を選択すると、プレビューと CSS の両方を受け取れます。

線形モードは入力された角度で linear-gradient を作成します。放射状モードは円形の radial-gradient を作成します。ブラウザーは 2 つのストップ間の中間色をレンダリングします。

90 度で #3366FF から #FF6655 を左から右へ向かう背景として設定します。これを実際のコンポーネントにコピーし、上に置くテキストのコントラストを再確認してください。

このジェネレーターは 2 つのカラーストップのみを使用し、ブラウザーごとの color-interpolation の違いは取り除けません。複数のストップ、アルファの遷移、広色域カラーは完全なエディタで追加してください。

グラデーションジェネレーターの色を別のアプリに移すには？

結果の下にあるコピー・ボタンを使って CSS、HEX、または HSL のテキストをコピーします。送り先のアプリが同じ色形式を解釈できることを確認してください。

グラデーションジェネレーターの画面色は印刷で一致しますか？

自動的には一致しません。発光する RGB 画面と、反射する紙やインクは色域と混色モデルが異なるため、印刷プロファイルとプルーフは依然必要です。

グラデーションジェネレーターだけでデザイントークンを承認できますか？

候補として使い、実際の背景・ダークモード・インタラクション状態・テキストコントラストを確認してから、トークン名を決めて承認してください。