CSS 勾配発生器

CSS グラデーション ジェネレーターは、ビジュアル インターフェイスとライブ プレビューを使用して美しい CSS グラデーションを作成できる無料のオンライン ツールです。 線形、ラジアル、円錐形のグラデーション タイプをサポートしているため、Web サイトの背景、ボタン、カード、およびその他の UI 要素の見事な色のトランジションを設計できます。

このツールは、カラー ストップの追加と配置、勾配方向と角度の調整、および微調整不透明度を調整するための直感的なドラッグ アンド ドロップ インターフェイスを提供します。 グラデーションがどのように見えるかを正確に確認できます。完璧な結果が得られるまで、さまざまな色の組み合わせを簡単に試すことができます。

グラデーションに満足したら、生成された CSS コードをコピーしてスタイルシートに貼り付けます。 このツールは、すべての最新のブラウザーで動作する、クリーンでクロスブラウザー互換の CSS を出力します。 プロ並みのグラデーションを作成するために、デザインやコーディングの専門知識は必要ありません。

ブラウザが勾配を描く方法について知っておくべきことの 1 つ: 色は sRGB で補間されており、知覚的には均一ではありません。青から黄色が古典的なケースである 2 つの強く反対する色をブレンドすると、どちらの端の色も示唆しない彩度の低いグレーを介して中間点が取得されます。通常の修正は、パスを操縦するために中央にストップを追加するか、ホイール上で端の色をより近くに選択することです。同じ位置でストップを繰り返すと、ブレンドではなくハードエッジが生成されます。これにより、ストライプとバンドエフェクトが構築されます。ベンダーのプレフィックスは、まだ更新を受けているブラウザの標準勾配には必要なくなり、最も短い出力も最も互換性があります。勾配は背景としてペイントされるため、寸法付きのボックスがまったく表示される必要があります。