CSSグラデーションジェネレーター

任意の数のカラーストップで線形または放射状のグラデーションをビジュアルに作成し、CSSをコピーできます。

カラーストップ


          
        

よくある質問

3色以上追加できますか?

はい、「カラーストップを追加」を好きなだけクリックできます。各ストップには個別の色と位置(%)があるため、単純な2色だけでなく多色グラデーションも作成できます。

線形と放射状の違いは何ですか?

線形グラデーションは、設定した角度に沿って直線的に変化します。放射状グラデーションは中心点から円形に外側へ変化し、角度の指定は適用されません。

この内容はどこかに送信されますか?

いいえ、グラデーションはすべてブラウザのCSSエンジン内で作成・プレビューされます。何もアップロードされません。