CSSグラデーション生成ツール
プライバシー優先設計 — すべてブラウザ内で処理します
ブラウザ内で線形と放射のCSSグラデーションを視覚的に作成できます。Toovaはカラーストップの配置、角度の調整、種類の切り替え、貼り付け準備が整ったCSSの書き出しを、サーバーに何もアップロードせずに行います。
線形、放射、円錐グラデーション
線形グラデーションは、角度または方向キーワードで定義される直線軸に沿って移動します。放射グラデーションは中心点から広がります。円錐グラデーションは角度を中心に掃きます。円グラフ風の背景や色相環の効果に最適です。Toovaはこの3種類をすべて視覚的なコントロールで操作できるため、CSS構文のすべてのバリアントを暗記しなくても、必要なグラデーションを作れます。
カラーストップとイージング
グラデーションバーに沿ってカラーストップをドラッグし、各色がどこで始まり終わるかを制御できます。必要なだけストップを追加できます。Toovaは上限を設けません。イージングプリセットで非線形補間を導入し、単純な2色グラデーションを悩ませる濁った灰色の中間色を避けられます。CSS出力はすべての最新ブラウザで対応している標準プロパティを使います。
ブラウザ内での生成
すべてのグラデーションはブラウザ内でローカルに生成されます。選択した色、配置したストップ、出力CSSのいずれもページから外に出ません。グラデーションには過剰な対応ですが、結果としてツールは高速で信頼性が高く、最初の読み込み後はオフラインでも動作します。使用中Networkタブは空のままです。
よくある質問
- 円錐グラデーションを使うべき場面は？
- 円錐グラデーションは、円グラフ風の効果、色相環、抽象的な回転背景に最適です。中心点を軸に掃くため、線形にも放射にもできないことができます。最新エンジン全体でブラウザ対応はもはや堅実です。
- 2色グラデーションの濁った中間色を避けるには？
- 知覚的にバランスの取れた色で中間ストップを追加するか、明度が近い色を選んでください。補色をRGB中点で混ぜると灰色になります。OKLCHで手動で中点を選べば避けられます。
- 他の形式に書き出せますか？
- 出力は標準のCSSで、あらゆるWebコンテキストで直接動作します。デザインツールへは、個別のカラーストップをコピーし、FigmaやSketchでグラデーションを再現してください。
- 透明度に対応していますか？
- はい。任意のカラーストップにアルファチャンネルを持たせられます。背景に縁をフェードさせたり、半透明ストップを持つグラデーションをレイヤリングしたりするときに便利です。
- データはどこかへ送信されますか？
- いいえ。生成はすべてブラウザ内で行われます。