CSSグラデーション生成
色と角度を決めるとCSSのlinear-gradientを書き出します。カラーストップを動かせば変化の位置も調整でき、そのまま貼り付けられます。
🎨 すべてブラウザ内で動きます。インストールも登録も不要です。
角度135°
プリセット
background: linear-gradient(135deg, #8b5cf6, #0ea5e9);
グラデーションの上に文字を載せるときは、もっとも明るい点ともっとも暗い点の両方で対比を確認してください。片方だけで合わせると、反対側で文字が消えます。
このツールでできること
- 二〜三色とストップ位置
- 角度指定またはradial
- CSSをその場でコピー
- Tailwindクラスの目安も表示
ほかのカラーツール
画面とそのカラープロファイルによって、色は少し違って見えることがあります。