クイックリンク

まだお気に入りがありません。よく使うツールを追加して、すぐにアクセスできるようにしましょう。

3Utils

グラデーション生成

? よくある質問

どのようなグラデーションタイプを作成できますか?

線形グラデーション(直線方向)、放射状グラデーション(中心から円を描く)、円錐状グラデーション(中心を囲むように広がる)を作成できます。それぞれの種類によって、背景やデザイン要素に異なる視覚効果をもたらします。

グラデーションの方向を制御するにはどうすればよいですか?

線形グラデーションの場合は、角度(0~360°)またはキーワード(右向き、下向き)を指定します。放射状グラデーションの場合は、形状(円/楕円)と位置を選択します。円錐状グラデーションは、中心点を中心に回転します。

1 つのグラデーションに複数の色を使用できますか?

はい!グラデーションに沿ってカラーストップを無制限に追加できます。各色を特定の割合(0~100%)で配置することで、色の表示位置とブレンド方法を制御できます。急激な変化には、カラーストップを近づける必要があります。

スムーズなトランジションとハードなトランジションを作成するにはどうすればよいでしょうか?

スムーズ:カラーストップを離して配置します(例:赤を0%、青を100%)。ハード:カラーストップを近づけて配置します(例:赤を49%、青を50%)。これにより、緩やかなブレンドまたはシャープな色の変化が得られます。

CSS コードを生成しますか?

はい!ツールは、適切なブラウザプレフィックス(linear-gradient()、radial-gradient()、conic-gradient())とすべてのパラメータが付いたCSSを生成します。そのままスタイルシートにコピー&ペーストしてください。

私のデータは安全ですか?

はい、もちろんです!このツールはブラウザ内で完全に動作します。データ処理はすべてデバイス上でローカルに行われ、サーバーにアップロードされることはありません。ファイルやデータはコンピューターから外部に漏れることがないため、完全なプライバシーとセキュリティが確保されます。