[ 06 / デザイン ]

CSSグラデーション作成

線形・放射・扇形グラデーションをカラーストップで作成し、CSSをコピー。

プリセット

種類

角度（°）

カラーストップ

バーをクリックするとストップを追加できます。ハンドルはドラッグするか、フォーカスして矢印キーで移動します（Shiftキーを押すと10%ずつ）。Deleteキーでフォーカス中のストップを削除します。

補間方法

OkLabやOkLChを使うと、中間色がくすまず滑らかにつながります。対応ブラウザはChrome 111以降、Safari 16.2以降、Firefox 127以降です。非対応のブラウザではグラデーション全体が無視され、代替の背景色が表示されます。

CSS

background-color: #0066FF;
background-image: linear-gradient(135deg, #0066FF 0%, #27EDED 50%, #0D2E5B 100%);

CSSには、最初のストップの色を使った単色のbackground-colorも代替として含まれます。編集内容はページのURLに反映されるので、ブックマークや共有にそのまま使えます。処理はすべてブラウザ内で行われます。

入力したテキストや色はブラウザ内で処理され、アップロードされません。