CSSグラデーションジェネレーター について
ライブプレビュー、複数のカラーストップ、プリセット付きで美しいCSSグラデーションを作成します。ワンクリックでCSSをコピーでき、すべてブラウザ内で動作します。
CSSグラデーションジェネレーター の使い方
- 1グラデーションタイプを選択します：リニア、ラジアル、またはコニック。
- 2角度（リニア用）または形状（ラジアル用 — 円または楕円）を設定します。
- 3カラーストップを追加し、グラデーション上の位置を調整します。
- 4「リピート」を切り替えてリピートグラデーションパターンにします。
- 5異なる形状（カード、円、全幅）でグラデーションをプレビューし、プリセットグラデーションを試します。
- 6CSS出力をコピーしてプロジェクトで使用します。
ヒント
- 3つ以上のカラーストップを慎重に配置すると、より滑らかで自然なグラデーションが作れます。
- コニックグラデーションは円グラフ、カラーホイール、放射状プログレスインジケーターに最適です。
- リピートグラデーションはストライプパターンを作成します。装飾的な背景やローディング状態に最適です。
OneKitTools チーム更新日 2.21.4