CSS 放射状グラデーション ジェネレーター
CSS グラデーションを視覚的に構築します。ライブ全幅プレビューとコピー可能なコードを使用して、線形、放射状、または円錐タイプ、角度スライダー、最大 6 つのカラー ストップを使用できます。
処理中...
0%
結果
このページでは、既に選択されている放射状タイプでグラデーション ジェネレーターが開きます。色は要素の中心から同心円状に外側に放射状に広がり、ストップを変更するたびにプレビューが即座に再描画されます。
Radial-gradient() は、方向ではなく焦点を必要とするスポットライトとグロー効果、ソフト ビネット、および背景用のツールです。停止位置はパーセントで中心からの距離にマッピングされます。0% は中央、100% は遠端です。そのため、最初の停止を締めると小さな明るいコアが作成され、それらを広げると広いウォッシュが作成されます。
プレビューが正しく表示されたら、背景の線をコピーします。円には方向がないため、このモードでは角度スライダーが非表示になります。線形または円錐に切り替えると再び表示されます。