カラー変換
HEX・RGB・HSL・OKLCH変換＋ピッカー・履歴。
▨
グラデーション生成
CSSグラデーションを視覚的に作成。
- #6366f10%
- #a855f7100%
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
CSS の角度は 0deg が下から上、90deg が左から右です。ストップは位置順に並べ替えて出力します。
グラデーション生成について
CSSグラデーション生成ツールは、背景やボタンに使う滑らかな色の遷移を、ストップ色と角度から視覚的に設計するツールです。linear-gradientとradial-gradientの両方がよく使われます。
toco.toolsではカラーストップを調整しながらプレビューを見て、完成したCSSをそのままコピーできます。
古いブラウザでは一部構文が未対応の場合があります。本番CSSではautoprefixerやターゲットブラウザを確認してください。
使い方
- グラデーション種類を選ぶ
- 色と角度を調整
- CSSをコピー
よくある質問（FAQ）
CSSグラデーション生成ツールとは何ですか？
背景用のlinear/radial-gradient CSSをGUIで作るツールです。
設定は外部に送信されますか？
いいえ。プレビューとコード生成はブラウザ内で完結します。
線形と放射状の違いは？
線形は直線方向に色が変化し、放射状は中心から外側へ広がるグラデーションです。