Web開発
CSS Gradient Generator
複数の色から線形、放射状、円錐形のグラデーションを作成し、完成したCSSを取得します。
0°は上、そこから時計回り。
A CSS gradient is a smooth transition between multiple colors, generated by the browser itself with no image needed. This tool lets you visually build a linear, radial, or conic gradient and copy the finished CSS instantly.
How to use it
- Add color stops and drag them to fine-tune where each transition happens.
- Pick a gradient type — linear (a direction in degrees), radial (shape and center position), or conic (rotation around a point).
- Copy the finished CSS with one click and paste it into background or background-image.
Common uses
- Picking a background for a hero section or button without opening a graphics editor.
- Recreating a gradient from a design mockup (Figma, etc.) in exact CSS syntax.
- Quickly experimenting with color transitions before locking a choice into a design system.
Things to keep in mind
A radial gradient defaults to stretching into the shape of its element (an ellipse), not always staying a circle — worth accounting for on rectangular blocks.
Multiple gradients can be layered by listing them comma-separated in background-image — it works like stacked layers, with the first one in the list on top.
よくある質問
線形、放射状、円錐形グラデーションの違いは何ですか?
線形グラデーションは選択した角度の直線に沿って遷移し、放射状グラデーションは中心点から円または楕円として外側に広がり、円錐形グラデーションはカラーホイールのように中心点の周りに色を掃引します。
円錐形グラデーションはすべてのブラウザでサポートされていますか?
現在の主要なブラウザはすべて円錐形グラデーションをサポートしていますが、線形や放射状グラデーションより新しいCSS機能のため、非常に古いブラウザバージョンではレンダリングされない場合があります。
出力として何が得られますか?
このツールは選択した色、ストップ、位置を使ってすぐに使えるCSS backgroundの構文を生成し、スタイルシートに直接貼り付けることができます。
repeating-linear-gradientは通常のlinear-gradientと何が違いますか?
通常のlinear-gradientは色の並びを要素全体にちょうど一度だけ引き伸ばしますが、repeating-linear-gradientは同じカラーストップの並びを周期的に繰り返すことで、縞模様やパターンのある背景を作り出します。
複数のグラデーションを背景として重ねることはできますか?
はい、background-imageプロパティはコンマ区切りのグラデーションのリストを受け付け、それらは複数の背景画像と同じようにレイヤーとして重なります——リストの最初のものが一番上に表示されます。