カスタムグラデーション作成・ランダムサンプル・Colorful Circles
グラデーション生成ツールは、CSSのグラデーションを視覚的に作り、そのままコピーできるコードとして出力するツールです。線形・円形・円錐など複数のタイプに対応しています。
CSSのグラデーションは linear-gradient() や radial-gradient() といった関数で書きますが、角度やカラーストップの位置を数値だけで想像しながら書くのは手間がかかります。実際の見た目を確認しながら調整して、確定したコードをコピーするほうが確実です。
作ったグラデーションはCSSコードとしてだけでなく、PNG画像としてもダウンロードできます。プレゼン資料の背景やOGP画像の下地としても使えます。
linear-gradient(180deg, ...) は上から下へ、90deg は左から右へのグラデーションになります。CSSのグラデーションの角度は「グラデーションが向かう方向」を、真上を0degとして時計回りに測ります。to right や to bottom right といったキーワードでも指定できます。
近い明度の色を広い面積で緩やかにつなぐと、色数の制約で段差が見えることがあります。中間にカラーストップを追加するか、わずかにノイズを重ねると目立ちにくくなります。
background-position を動かす方法が一般的です。background-size を大きめに設定したうえで位置をアニメーションさせると、グラデーションが流れるように見えます。background-image そのものは補間できないため、直接トランジションをかけても切り替わってしまいます。
background にグラデーションを設定し、background-clip: text と color: transparent を併用します。この場合、文字が背景の一部として描かれるため、背景とのコントラストが確保されているかを確認してください。
グラデーションの中間色は、既定ではsRGB空間で線形に補間されます。そのため、補色に近い2色をつなぐと中間がくすんだ灰色になることがあります。CSS Color Level 4に対応した環境では linear-gradient(in oklch, ...) のように補間する色空間を指定でき、より鮮やかな中間色が得られます。対応していないブラウザ向けには、従来の記法もあわせて用意しておくと安全です。